ورقة غش تضمين Google Fonts

توفر Google Fonts مكتبة خطوط ويب مفتوحة المصدر جاهزة للتضمين السريع في HTML وCSS.

طرق التضمين

وسم HTML Link

ضعه داخل وسم <head> في مستند HTML الخاص بك:

<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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

CSS @import

أدرجه في أعلى ورقة أنماط CSS تماماً قبل أي قواعد أخرى:

/* عائلة خط واحدة مع الأوزان */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* دمج عدة عائلات خطوط */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,400;1,400&display=swap');

تطبيق CSS Font Family

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

المراجع

• مكتبة Google Fonts
• توثيق واجهة Google Fonts API