font-family

لإدراج عدة أنواع من الخطوط في صفحتك باستخدام ملف CSS، يمكنك استخدام قواعد @font-face أو الاعتماد على الخطوط المضمنة من مصادر مثل Google Fonts. سأوضح لك الطريقتين:

1. استخدام @font-face مع ملفات الخطوط المحلية:

إذا كنت تمتلك ملفات الخطوط (.ttf, .woff,) محليًا وتريد تضمينها في ملف CSS الخاص بك، يمكنك استخدام قاعدة @font-face كما يلي:

 

@font-face {
    font-family: 'MyCustomFont1';
    src: url('fonts/MyCustomFont1.woff2') format('woff2'),
         url('fonts/MyCustomFont1.woff') format('woff'),
         url('fonts/MyCustomFont1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont2';
    src: url('fonts/MyCustomFont2.woff2') format('woff2'),
         url('fonts/MyCustomFont2.woff') format('woff'),
         url('fonts/MyCustomFont2.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* استخدام الخطوط في العناصر */
body {
    font-family: 'MyCustomFont1', sans-serif;
}

h1 {
    font-family: 'MyCustomFont2', serif;
}

2. استخدام Google Fonts:

إذا كنت تفضل استخدام الخطوط من Google Fonts، يمكنك تضمين الروابط الخاصة بها في رأس ملف HTML أو داخل ملف CSS:
 

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/* استخدام الخطوط في العناصر */
body {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-family: 'Open Sans', sans-serif;
}