تضمين الخطوط المخصصة في لغة CSSCSS Web Fonts

في جوهرها، تعتمد جميع منصات الخطوط السحابية خلف الكواليس على قاعدة أصيلة في لغة CSS يمكنك كتابتها بنفسك مباشرةً، وهي قاعدة @font-face. تتيح لك هذه القاعدة وضع ملفات الخطوط داخل مجلدات مشروعك المحلي (مثل المجلد /fonts/) وتعريفها للمتصفح دون الاعتماد على أي خادم خارجي.

تتم عملية تضمين الخط المخصص عبر خطوتين متكاملتين — أولاً تكتب كتلة @font-face في مطلع ملف الأنماط لتمنح العائلة اسماً من اختيارك عبر font-family وتربطها بمسار الملف في الواصف src باستخدام دالة url() ودالة format("woff2")؛ وثانياً تستدعي هذا الاسم مع عائلة احتياطية داخل محددات الصفحة مثل body و h1.

تستخدم أنظمة التشغيل المكتبية عادةً ملفات خطوط غير مضغوطة بصيغتي TTF و OTF، وهي أحجام ثقيلة تبطئ فتح صفحات الويب. لذلك أصبحت صيغة WOFF2 المعيار القياسي الأول للويب الحديث؛ إذ تدمج خوارزمية ضغط Brotli المتطورة داخل بنية الخط نفسه، مما يقلص حجم الملف بنحو 30% مقارنةً بالجيل الأول WOFF وبأكثر من النصف مقارنةً بملفات سطح المكتب الخام.

وعند كتابة الدالة format("woff2") مباشرةً بعد url()، فإنك تُخبر المتصفح مسبقاً بنوع الملف الرقمي ليتحقق من دعمه الصريح قبل الشروع في تنزيله.

إذا عرّفت ملف الخط العادي ذي الوزن 400 وحده تحت الاسم "BrandCairo"، ثم طلبت لعنوان h1 سماكة عريضة font-weight: 700;، فلن يجد المتصفح رسماً حقيقياً للحروف العريضة؛ فيلجأ إلى التسميك الصناعي (Faux Bold) عبر نفخ حدود الحرف آلياً. يؤدي هذا التسميك المصطنع في الحروف العربية المتصلة إلى طمس فتحات الحروف وتلاصق النقاط وتشوه جماليات الكلمة.

لمنع هذا التشوه، اربط كل ملف وزن حقيقي بكتلة @font-face مستقلة تحمل اسم font-family ذاته تماماً، مع تحديد الواصف font-weight: 400; للملف العادي و font-weight: 700; للملف العريض ليختار المتصفح الملف الأصيل تلقائياً:

تقدّم تقنية الخطوط المتغيرة (Variable Fonts) حلاً هندسياً أكثر كفاءة؛ فبدلاً من رفع أربعة أو خمسة ملفات منفصلة للأوزان الثابتة، يجمع ملف .woff2 متغير واحد كامل طيف السماكات بسلاسة متصلة. يقلل هذا النهج عدد طلبات الشبكة إلى ملف وحيد، ويمنحك حرية استخدام أوزان وسطية دقيقة مثل 450 أو 650 أو 750.

لتعريف مدى الأوزان داخل قاعدة @font-face، اكتب الحد الأدنى متبوعاً بمسافة ثم الحد الأعلى على الصورة font-weight: 100 900; دون وضع شرطة بين الرقمين:

عند تحميل خط مخصص عبر شبكة هاتف بطيئة دون تحديد سلوك العرض، قد تُخفي المتصفحات النصوص تماماً لعدة ثوانٍ بانتظار وصول ملف الخط — وهي ظاهرة مزعجة تُعرف بوميض النص المخفي (FOIT). يعالج الواصف font-display: swap; داخل كتلة @font-face هذه المشكلة جذرياً؛ إذ يعرض النص فوراً بالخط الاحتياطي المحلي منذ اللحظة الأولى ثم يستبدله بالخط المخصص فور اكتمال تنزيله.

قارن بين الإعدادات الثلاثة عملياً في المختبر التفاعلي التالي:

تمنحك استضافة ملفات .woff2 محلياً داخل مجلدات مشروعك نفسه (مثل المسار /fonts/cairo-var.woff2) ثلاث مزايا جوهرية تتفوق بها على استدعاء الخطوط من خوادم طرف ثالث:

• حماية كاملة لخصوصية الزوار: تبقى جميع طلبات جلب الخط داخل نطاق موقعك ذاته، فلا يُكشف عنوان IP الخاص بالزائر ولا يُرسل رأس Referer إلى أي شركة خارجية.
• توفير مصافحات الاتصال الإضافية: بدلاً من فتح اتصالات جديدة بنطاقات خارجية، يحمّل المتصفح ملفات الخط عبر قناة الاتصال نفسها المفتوحة مسبقاً لجلب صفحات موقعك.
• العمل الموثوق في الشبكات المعزولة: تظهر الخطوط المحلية بكامل أناقتها داخل الشبكات المؤسسية الداخلية وبيئات التطوير المحلية دون أدنى تأثر بانقطاع الإنترنت الخارجي.

لأن وجود العائلة الاحتياطية يُبقي النص مقروءاً حتى لو كان مسار ملف الخط خاطئاً، لا تكتفِ بالنظر السريع إلى الصفحة للتأكد من نجاح قاعدة @font-face، بل تحقّق عملياً عبر خطوتين داخل أدوات المطور DevTools:

1. فحص تبويب Network مع مرشح Font: أعد تحميل الصفحة وتأكد من ظهور ملف .woff2 المحلي بحالة نجاح 200 وعدم رجوع خطأ مسار مفقود 404.
2. فحص قسم Rendered Fonts أسفل لوحة Computed: حدد عنصر العنوان أو الفقرة في فاحص العناصر وانتقل إلى نهاية قائمة الأنماط المحسوبة؛ فهناك يذكر المتصفح صراحةً اسم الخط الفعلي المرسوم على الشاشة وعدد الحروف المأخوذة من ملف الشبكة أو من خط النظام البديل.