إضافة خط Google مخصص إلى مدونتك
استبدل الخط الافتراضي لقالبك بأي خط من Google Fonts في ثلاث خطوات — دون CSS يدوي، ودون إدارة ملفات خطوط، ودون إزاحة تراكمية للتخطيط ناجمة عن تحميل الخطوط المتأخر.
إضافة خط Google مخصص إلى مدونتك على VeloCMS تستلزم ثلاث خطوات في قسم Typography من إدارة القوالب. تختار عائلة الخط من قائمة بحثية تضم جميع Google Fonts، وتحدد الأوزان التي تحتاجها (400 للمحتوى، و700 للخط العريض، و800 للعناوين وهي مجموعة شائعة)، ثم تنقر على حفظ. يُحمَّل الخط عبر آلية تحسين الخطوط المدمجة في Next.js، التي تستضيف ملفات الخط ذاتيًا وتضيف size-adjust للقضاء على الإزاحة التراكمية للتخطيط.
اختيار خطوط تنسجم مع بعضها
تعتمد معظم مدونات VeloCMS على خطين: أحدهما للعناوين (عادةً serif عريض أو sans هندسي) والآخر لنص المحتوى (عادةً sans إنساني مُحسَّن للقراءة بالأحجام الصغيرة). من الثنائيات الكلاسيكية: Playfair Display مع Lato، وFraunces مع DM Sans، وSpace Grotesk مع Inter، وMerriweather مع Source Sans 3. إن لم تكن متأكدًا من اختيارك، فالالتزام بعائلة خط واحدة بأوزان مختلفة هو دائمًا خيار آمن — Inter بالأوزان 400/600/800 هو الافتراضي لأسباب وجيهة.
كيف يُحسِّن Next.js تحميل الخطوط
يستخدم VeloCMS next/font/google خلف الكواليس، وهو يُنزِّل ملفات الخط من Google أثناء البناء، ويستضيفها ذاتيًا على نطاقك، ويُولِّد إعلان font-display بقيمة size-adjust مضبوطة على خطك تحديدًا. النتيجة: لا طلبات خارجية إلى fonts.gstatic.com في الإنتاج (تحسين للخصوصية)، ولا FOUT (وميض النص غير المنسق)، وصفر من الإزاحة التراكمية الناجمة عن تبديل الخطوط.
تحميل أكثر من عائلتين من الخطوط أو أكثر من أربعة متغيرات وزن/أسلوب لكل عائلة يُضيف حجمًا محسوسًا للصفحة. أبقِ اختيارك في حدود عائلتين، وثلاثة أوزان كحد أقصى، وتجنب المتغيرات المائلة ما لم يستلزمها تصميمك بصورة صريحة.
الخطوط الاحتياطية أثناء تحميل الخط المخصص
يتضمن CSS الخاص بالقالب مجموعة خطوط احتياطية تُقارب مقاييس خط Google الذي اخترته. عندما يُولِّد VeloCMS إدخالًا لخط مخصص، يحسب قيمة size-adjust باستخدام خوارزمية Fontaine بحيث يُعيَّن الخط الاحتياطي بارتفاع سطر وعرض حروف يكادان يطابقان الخط المُحمَّل. هذا هو السر وراء القضاء على الإزاحة التراكمية — لا يقفز التخطيط حين يصل الخط المخصص.