كيفية إضافة خطوط للموقع
إضافة خطوط مميزة إلى موقعك تعتبر طريقة فعالة لتحسين تجربة المستخدم وتعزيز الهوية البصرية للموقع. هناك عدة طرق لإضافة خطوط للموقع، وتختلف باختلاف نوع الخط والمصدر المستخدم.
استخدام خطوط Google Fonts
من أسهل وأشهر الطرق لإضافة خطوط للموقع هو استخدام مكتبة Google Fonts، حيث توفر آلاف الخطوط المجانية التي يمكن دمجها بسهولة. لإضافة خط من Google Fonts، اتبع الخطوات التالية:
1. قم بزيارة موقع Google Fonts واختر الخط الذي ترغب به.
2. بعد اختيار الخط، اضغط على زر "Select this style" لتحديد الوزن والأنماط التي تريد استخدامها.
3. سيظهر لك كود HTML تحت عنوان "Embed" مثل:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
4. قم بنسخ هذا الكود ولصقه داخل الوسم <head> في صفحات موقعك.
5. استخدم الخط في CSS الخاص بالموقع، مثلاً:
body {
font-family: 'Roboto', sans-serif;
}
رفع الخطوط واستخدامها محليًا
إذا كنت تملك خطًا محددًا أو ترغب في استخدام خط غير متاح على جوجل، يمكنك رفع ملفات الخطوط (مثل ملفات .woff, .woff2, .ttf) إلى مجلد داخل موقعك ثم ربطها من خلال CSS.
مثال على ذلك:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
بهذه الطريقة، تتأكد من أن الخط سيعمل حتى بدون اتصال بخوادم خارجية.
نصائح مهمة عند إضافة الخطوط للموقع
عند اختيار الخطوط يجب مراعاة سرعة تحميل الموقع، فكلما زادت ملفات الخطوط وحجمها زاد وقت تحميل الصفحة. لذا من الأفضل اختيار الخطوط الخفيفة أو استخدام نسخ الويب الخاصة بها.
أيضًا، تأكد من توافق الخط مع جميع المتصفحات وأن الخط يدعم اللغات التي تعرضها على موقعك.
يمكنك أيضًا تنويع استخدام الخطوط بين العناوين والنصوص لمظهر أكثر جاذبية وتنظيمًا.
