i18n(ar): create ar/guides/fonts:

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

@@ -0,0 +1,146 @@
+---
+title: استخدام الخطوط المخصصة
+description: >
+  هل ترغب في إضافة خطوط مخصصة إلى موقع ويب Astro؟
+  يمكنك استخدام Google Fonts مع Fontsource أو إضافة أي خط من اختيارك بسهولة.
+i18nReady: true
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components'
+
+سيرشدك هذا الدليل إلى كيفية إضافة خطوط الويب إلى مشروعك واستخدامها في مكوناتك.
+
+### استخدام ملف خط محلي
+
+سيوضح هذا المثال كيفية إضافة خط مخصص باستخدام ملف الخط `DistantGalaxy.woff`.
+
+<Steps>
+
+1. أضف ملف الخط إلى `public/fonts/`.
+
+2. أضف البيان التالي `@font-face` إلى CSS الخاص بك. يمكن أن يكون ذلك في ملف `.css` عام تستورده، أو في كتلة `<style is:global>`, أو في كتلة `<style>` في تصميم أو مكون معين حيث تريد استخدام هذا الخط.
+
+    ```css
+    /*  قم بتسجيل خطك المخصص وأخبر المتصفح بمكان العثور عليه.*/
+    @font-face {
+      font-family: 'DistantGalaxy';
+      src: url('/fonts/DistantGalaxy.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      font-display: swap;
+    }
+    ```
+
+3. استخدم قيمة `font-family` من بيان `@font-face` لتنسيق العناصر في المكون أو التخطيط الخاص بك. في هذا المثال، سيحصل العنوان `<h1>` على الخط المخصص، بينما لن يتأثر الفقرة `<p>`.
+
+    ```astro title="src/pages/example.astro" {9-11}
+    ---
+    ---
+    <h1>في مجرة بعيدة، بعيدة جداً...</h1>
+
+    <p>الخطوط المخصصة تجعل العناوين أكثر روعة!</p>
+
+    <style>
+    h1 {
+     font-family: 'DistantGalaxy', sans-serif;
+    }
+    </style>
+    ```
+
+</Steps>
+
+
+### استخدام Fontsource
+
+يُبسط مشروع [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>
+      <Fragment slot="npm">
+      ```shell
+      npm install @fontsource/twinkle-star
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add @fontsource/twinkle-star
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add @fontsource/twinkle-star
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    :::tip
+    ستجد اسم الحزمة الصحيح في قسم "التثبيت السريع" في كل صفحة خط على موقع Fontsource. سيبدأ بـ `@fontsource/` أو `@fontsource-variable/` يليه اسم الخط.
+    :::
+
+3. استورد حزمة الخط في المكون الذي ترغب في استخدام الخط فيه. عادةً، يجب أن تقوم بذلك في مكون تخطيط مشترك لضمان توفر الخط عبر موقعك.
+
+    سيقوم الاستيراد بإضافة القواعد اللازمة لـ `@font-face` تلقائيًا لإعداد الخط.
+
+    ```astro title="src/layouts/BaseLayout.astro"
+    ---
+    import '@fontsource/twinkle-star';
+    ---
+    ```
+
+4. استخدم اسم الخط كما هو موضح في مثال `body` في صفحة Fontsource كقيمة لـ `font-family`. هذا سيعمل في أي مكان يمكنك كتابة CSS فيه في مشروعك باستخدام Astro.
+
+    ```css
+    h1 {
+      font-family: "Twinkle Star", cursive;
+    }
+    ```
+
+</Steps>
+
+لتحسين أوقات عرض موقعك، قد ترغب في تحميل الخطوط الأساسية التي تحتاجها الصفحة في البداية. راجع [دليل Fontsource لتحميل الخطوط مسبقًا](https://fontsource.org/docs/getting-started/preload) لمزيد من المعلومات والاستخدام.
+
+## تسجيل الخطوط في Tailwind
+
+إذا كنت تستخدم [تكامل Tailwind](/ar/guides/integrations-guide/tailwind/)، يمكنك استخدام أي من الطرق السابقة في هذه الصفحة لتثبيت الخط، مع بعض التعديلات. يمكنك إما إضافة جملة [`@font-face` لخط محلي](#استخدام-ملف-خط-محلي) أو استخدام [استراتيجية الاستيراد الخاصة بـ Fontsource](#استخدام-fontsource) لتثبيت خطك.
+
+لتسجيل خطك في 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'
+
+    /** @type {import('tailwindcss').Config} */
+    export default {
+    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+    	theme: {
+    		extend: {
+    			fontFamily: {
+    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
+    			},
+    		},
+    	},
+    	plugins: [],
+    }
+    ```
+
+    الآن، سيستخدم كل النص بدون سيريف (الافتراضي في Tailwind) في مشروعك الخط الذي اخترته، وستقوم أيضًا فئة `font-sans` بتطبيق خط Inter.
+</Steps>
+
+راجع [توثيق Tailwind حول إضافة عائلات الخطوط المخصصة](https://tailwindcss.com/docs/font-family#using-custom-values) لمزيد من المعلومات.
+
+## المزيد من الموارد
+
+- تعرف على كيفية عمل خطوط الويب في [دليل MDN لخطوط الويب](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
+- توليد CSS لخطك باستخدام [مولد الخطوط الويب من Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).