i18n(ar): Fix HTML and style block formatting in "Custom Fonts" guide…

…Update fonts.mdx

- Corrected the indentation and formatting issues in HTML and CSS blocks within the Arabic "Custom Fonts" guide.
- Ensured proper alignment and structure for `<h1>`, `<p>`, and `<style>` tags.

src/content/docs/ar/guides/fonts.mdx

@@ -15,7 +15,9 @@ import { Steps } from '@astrojs/starlight/components'
 سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`.
 
 <Steps>
+
 1. أضف ملف الخط إلى `public/fonts/`.
+
 2. أضف البيان التالي `@font-face` إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف `.css` عام تستورده، أو في كتلة `<style is:global>`, أو في كتلة `<style>` في تصميم أو مكون معين حيث تريد استخدام هذا الخط.
 
     ```css
@@ -43,8 +45,8 @@ import { Steps } from '@astrojs/starlight/components'
      font-family: 'DistantGalaxy', sans-serif;
     }
     </style>
-
     ```
+
 </Steps>
 
 
@@ -53,7 +55,9 @@ import { Steps } from '@astrojs/starlight/components'
 يُبسط مشروع [Fontsource](https://fontsource.org/) استخدام خطوط Google والخطوط مفتوحة المصدر الأخرى. يوفر وحدات npm التي يمكنك تثبيتها للخطوط التي ترغب في استخدامها.
 
 <Steps>
+
 1. ابحث عن الخط الذي تريد استخدامه في [كتالوج Fontsource](https://fontsource.org/). في هذا المثال، سيتم استخدام [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
+
 2. قم بتثبيت الحزمة الخاصة بالخط الذي اخترته باستخدام أداة إدارة الحزم مثل npm، pnpm أو yarn.
 
     <PackageManagerTabs>
@@ -75,8 +79,8 @@ import { Steps } from '@astrojs/starlight/components'
     </PackageManagerTabs>
 
     :::tip
-ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط.
-        :::
+    ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط.
+    :::
 
 3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك.
 
@@ -88,13 +92,14 @@ import { Steps } from '@astrojs/starlight/components'
     ---
     ```
 
-4.  استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro.
+4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro.
 
     ```css
     h1 {
       font-family: "Twinkle Star", cursive;
     }
     ```
+
 </Steps>
 
 لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام.
@@ -106,10 +111,13 @@ import { Steps } from '@astrojs/starlight/components'
 لتسجيل خطك في Tailwind:
 
 <Steps>
+
 1. اتبع أيًا من الأدلة السابقة، ولكن تخطَّ الخطوة الأخيرة من إضافة `font-family` إلى CSS.
+
 2. أضف اسم الخط إلى `tailwind.config.mjs`.
 
     هذا المثال يضيف `Inter` إلى مجموعة الخطوط بدون سيريف، مع الخطوط الاحتياطية الافتراضية من Tailwind CSS.
+
     ```js title="tailwind.config.mjs" ins={1,8-10}
     import defaultTheme from 'tailwindcss/defaultTheme'