من المهم للغاية تقديم الخطوط بسرعة، فالتسليم الأسرع لا يعني فقط أن النص سيكون مرئيًا للمستخدم في وقت أقرب، بل له أيضًا تأثير كبير على ما إذا كان الخط يتسبب في تغيير التنسيق. إذا تعذّر تسليم خط قبل الحاجة إليه، فعادةً ما يكون هناك تغيير في التصميم عند تبديل الخط. يمكن أن يختلف حجم متغيّرات التصميم هذا اعتمادًا على مدى تطابق الخط الاحتياطي مع خط الويب. لرؤية هذه الظواهر عمليًا، اعرض العرض التوضيحي وقارن بين تغيّرات التصميم التي تحدث عند الاتصال السريع مقابل الاتصال البطيء.
يجمع المثال أدناه بين أسلوبَين للأداء لتحميل خط تابع لجهة خارجية في أسرع وقت ممكن: استخدام تعريفات الخطوط المضمّنة واستخدام تلميحات الموارد preconnect. على الرغم من أن مقتطف الرمز هذا يوضح كيفية تحميل الخطوط من Google Fonts، فإنّ هذه الأساليب تنطبق أيضًا على موفري خطوط آخرين تابعين لجهات خارجية.
بيانات الخطوط المضمّنة: إنّ تضمين إعلانات
font-familyفي المستند الرئيسي بدلاً من تضمين هذه المعلومات في ورقة أنماط خارجية، يسمح للمتصفح بتحديد ملفات الخطوط التي سيتم استخدامها في الصفحة بدون الحاجة إلى انتظار تنزيل ملف ورقة أنماط منفصل. وهذا مهم لأنّ المتصفحات بشكل عام لن تنزّل ملفات الخطوط إلى أن تعرف أنّها مستخدمة على الصفحة. في معظم الحالات، يُفضَّل استخدام نماذج الخطوط المضمّنة استخدامpreloadلتحميل الخطوط.Preconnect: إنّ الطريقة المقترَحة لتحميل Google Fonts هي استخدام العلامة
<link>مع تعديلات مواردpreconnect. ينشئ تلميح الموردpreconnectاتصالاً مبكرًا بأصل الجهة الخارجية. في مقتطف الرمز أدناه، يساعد تلميح المورد الأول على إعداد اتصال لتنزيل ورقة الأنماط الخاصة بالخط، بينما يعمل تلميح المورد الثاني على إعداد اتصال لتنزيل ملفات الخطوط.
مثال:
HTML
<head>
<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=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>