إستعمال خطوط أنماط خارجية في css

يُمكنك إستخدام خطوط google بعد إختيار الخط الذي تريد إستعماله، تدخل لصفحة الخط و تُحدد الأحجام التي تريدها بعد ذلك من القائمة الجانبية ستجد قائمة للخطوط التي أخترتها مثلاً خط Cairo و ستجد طريقتين إما عبر وسم link من خلال html أو عبر import من خلال css:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;500&display=swap" rel="stylesheet">

تضع الأسطر في وسم ال head ثم تستخدم الخط من خلال الخاصية font-family و تحدده للعناصر التي تريدها:

font-family: 'Cairo', sans-serif;

نفس الشيء إن أردت إستخدام import في أعلى ملف css تستدعي ملف الخط:

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;500&display=swap');

ثم تستخدم الخط بنفس الطريقة.

هناك طريقة أخرى و هي إستعمال قاعدة font-face في css إن كنت تملك ملفات الخطوط التي تريد إستعمالها و قمت مسبقاً بتنزيلها الطريقة كالآتي:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

نُحدد إسم الخط من خلال font-family و من خلال src نضع مسار ملف الخط، ثم نستعمل الإسم  على العناصر التي نريد تطبيق الخط فيها.

ستجد أسفله بعض المصادر عن كيفية تضمين خطوط خارجية في مشروعك:

• القاعدة font-face على موسوعة حسوب