CSS Academy · درس

Google Fonts و@font-face

حمّل خطوطًا خارجية من Google Fonts أو عرّف خطوطًا مخصصة باستخدام قاعدة @font-face.

Google Fonts و@font-face درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

لماذا نستخدم الخطوط المخصّصة؟

لا توفّر الخطوط الآمنة للويب سوى عدد محدود من الخيارات. وتتيح الخطوط المخصّصة مطابقة هوية العلامة التجارية بدقة. والطريقتان الأساسيتان هما Google Fonts (خدمة مستضافة) و@font-face (استضافة ذاتية).

إعداد Google Fonts

انتقل إلى fonts.google.com، واختر عائلة خط، وحدّد الأوزان، ثم انسخ وسم <link> إلى <head> في HTML:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

استخدام Google Fonts في CSS

بعد إضافة الرابط، أشِر إلى الخط باسمه ضمن مجموعة font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

معلمات Google Fonts API

تستخدم المعلمة display=swap استراتيجية Font Display Swap؛ إذ يظهر النص فورًا بالخط البديل، ثم يُستبدل به الخط المخصّص عند تحميله. ويمنع ذلك اختفاء النص أثناء التحميل.

أساسيات @font-face

تتيح لك @font-face تحميل ملف خط مخصّص تستضيفه بنفسك. حدّد اسم عائلة الخط ومصدر الملف:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: التنسيق العصري

يُعدّ WOFF2 (Web Open Font Format 2) التنسيق الموصى به. فهو يوفّر أفضل ضغط (أصغر عادةً بنسبة 30% من WOFF)، وتدعمه جميع المتصفحات الحديثة. أدرج WOFF دائمًا كخيار احتياطي.

أوزان متعددة باستخدام @font-face

أعلِن عن كتلة @font-face واحدة لكل تركيبة من الوزن والنمط. استخدم اسم font-family نفسه كي يختار المتصفح الملف الصحيح تلقائيًا:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

خاصية font-display

يتحكم واصف font-display في سلوك تحميل الخط:

swap — عرض الخط البديل فورًا واستبداله عند الجاهزية (موصى به)
block — نص غير مرئي لمدة تصل إلى 3 ثوانٍ
fallback — حجب قصير ثم استخدام الخط البديل نهائيًا
optional — الاستخدام فقط إذا كان الخط مخزّنًا مؤقتًا مسبقًا

<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face للخطوط المتغيرة

تحدّد الخطوط المتغيرة نطاقات للمحاور بدلًا من قيم ثابتة للأوزان:

<p class="variable-text">Variable weight text (550)</p>

التحميل المسبق للخطوط الأساسية

حمّل ملف الخط الأكثر أهمية مسبقًا لتقليل التأخير الذي يمنع العرض. أضف <link rel="preload"> قبل ورقة الأنماط:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

استخدام local() لتجاوز التنزيل

استخدم local() في src للتحقق مما إذا كان الخط مثبتًا لدى المستخدم مسبقًا قبل تنزيله:

<p class="roboto-text">Uses local Roboto if installed</p>

تحقق سريع

أي تنسيق للخط يوفّر أفضل ضغط وأوسع دعم في المتصفحات الحديثة؟

خلاصة

توفّر Google Fonts خطوطًا مستضافة بسهولة عبر وسم <link>. واستضف الخطوط بنفسك باستخدام @font-face وتنسيق WOFF2، مع font-display: swap للحصول على أفضل أداء. حمّل الخطوط الأساسية مسبقًا، واستخدم local() لتجنّب التنزيلات غير الضرورية.

الأسئلة الشائعة

هل درس «Google Fonts و@font-face» مجاني؟

نعم — نص درس «Google Fonts و@font-face» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Google Fonts و@font-face»؟

حمّل خطوطًا خارجية من Google Fonts أو عرّف خطوطًا مخصصة باستخدام قاعدة @font-face. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Google Fonts و@font-face»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy