شرح Google Fonts في CSS — كيف تضيف خطوطاً عربية احترافية لموقعك؟
بعد تعلم أساسيات الخطوط في CSS، الخطوة الطبيعية هي استخدام خطوط احترافية خارج خطوط النظام. أفضل خيار مجاني وشائع هو Google Fonts.
إذا كنت تبحث عن كيفية إضافة Google Fonts في CSS أو أفضل الخطوط العربية في Google Fonts أو طريقة استخدام Cairo أو Tajawal في الموقع، فهذا الدرس عملي ومباشر.
ما هي Google Fonts؟
Google Fonts خدمة مجانية توفر مئات الخطوط الجاهزة للويب. بدلاً من رفع ملفات الخط يدوياً، يمكنك ربط الخط مباشرة عبر رابط، ثم استخدامه في CSS.
التعريف البسيط: Google Fonts هي مكتبة خطوط ويب مجانية من جوجل يمكن استخدامها بسهولة داخل HTML وCSS.
كيف أضيف Google Fonts إلى موقعي؟
الطريقة الأكثر شيوعاً تتكون من 3 خطوات:
- اختيار الخط من
fonts.google.com. - نسخ كود
<link>ووضعه داخل<head>. - استخدام اسم الخط في
font-familyداخل CSS.
مثال عملي: إضافة خط Cairo في CSS
داخل HTML (في head):
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
داخل CSS:
body {
font-family: "Cairo", sans-serif;
}
ماذا يفعل هذا الكود؟ يحمّل خط Cairo من Google Fonts ويطبقه على كامل الموقع.
سطر بسطر:
family=Cairo: اسم الخط.wght@400;700: أوزان الخط المطلوبة فقط.display=swap: يحسن تجربة التحميل.font-family: تطبيق الخط على العناصر.
النتيجة المتوقعة: مظهر عربي أنظف وأكثر احترافية.
خطأ شائع: كتابة اسم خط مختلف في CSS عن الاسم الحقيقي من Google Fonts.
النتيجة في المتصفح: قبل Google Fonts
هذا نص عربي بخط نظام افتراضي.
النتيجة في المتصفح: بعد Google Fonts (محاكاة)
هذا نص عربي بعد تطبيق خط Cairo.
طريقة ثانية: @import في CSS
يمكنك أيضاً استيراد الخط مباشرة داخل ملف CSS باستخدام @import.
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap");
body {
font-family: "Tajawal", sans-serif;
}
ماذا يفعل هذا الكود؟ يستورد خط Tajawal مباشرة من داخل CSS.
النتيجة المتوقعة: نفس النتيجة تقريباً مثل طريقة link.
خطأ شائع: وضع @import في منتصف الملف بدل بدايته.
أفضل الخطوط العربية الشائعة على Google Fonts
- Cairo: واضح وحديث وممتاز للواجهات.
- Tajawal: مريح جداً للنصوص الطويلة.
- Almarai: بسيط وعملي.
- Amiri: طابع تقليدي/مطبوعي أكثر.
نصائح SEO + أداء عند استخدام Google Fonts
- حمّل الأوزان التي تحتاجها فقط (مثلاً 400 و700).
- لا تستخدم خطوطاً كثيرة في الصفحة الواحدة.
- اجعل دائماً fallback font مثل
sans-serif. - اختبر سرعة الصفحة بعد إضافة الخطوط.
أخطاء شائعة في Google Fonts مع CSS
١) الخط لا يظهر: غالباً الرابط غير مضاف في head أو هناك خطأ في اسم الخط.
٢) تحميل بطيء: بسبب استيراد أوزان كثيرة بلا حاجة.
٣) غياب fallback: يجعل الصفحة غير متناسقة إذا فشل تحميل الخط.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
كيف أضيف Google Fonts إلى HTML وCSS؟
أضف رابط الخط داخل head ثم استخدم اسمه في font-family.
هل أستخدم link أم @import مع Google Fonts؟
كلاهما يعمل، لكن <link> غالباً أفضل وأوضح في معظم المشاريع.
ما أفضل خط عربي من Google Fonts للمواقع؟
Cairo وTajawal من أفضل الخيارات الشائعة كبداية.
لماذا خط Google Fonts لا يعمل عندي؟
تحقق من: وجود الرابط، صحة اسم الخط، واتصال الشبكة، وعدم وجود خطأ إملائي في font-family.
هل Google Fonts يؤثر على سرعة الموقع؟
نعم بشكل بسيط. لذلك قلّل عدد الخطوط والأوزان لتحسين الأداء.