גופנים של צד שלישי

חשוב מאוד לספק גופנים במהירות: העברה מהירה יותר של גופנים לא רק מאפשרת שהטקסט יהיה גלוי למשתמש מוקדם יותר, אלא גם יש לה השפעה גדולה על היכולת של גופן מסוים לגרום לתנודות בפריסה. אם אי אפשר לשלוח גופן לפני שיש בו צורך, בדרך כלל תהיה שינוי פריסה כשמחליפים את הגופן. הגודל של שינוי הפריסה הזה עשוי להשתנות בהתאם למידת ההתאמה של הגופן החלופי לגופן האינטרנט. כדי לראות את התופעה הזו בפעולה, אפשר לצפות בהדגמה (דמו) ולהשוות בין השינויים בפריסה שמתרחשים בחיבור מהיר לעומת חיבור איטי.

הדוגמה הבאה משלבת שתי שיטות ביצועים כדי לטעון גופן של צד שלישי במהירות האפשרית: שימוש בהצהרות גופנים בתוך השורה ושימוש ברמזים של משאב 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>