גופנים באירוח עצמי הם קובצי גופנים שמוצגים מהשרתים שלכם ולא מהשרתים של ספק גופנים צד שלישי (לדוגמה Google Fonts).
חשוב מאוד לספק גופנים במהירות: העברה מהירה יותר של גופנים לא רק מאפשרת שהטקסט יהיה גלוי למשתמש מוקדם יותר, אלא גם יש לה השפעה גדולה על היכולת של גופן מסוים לגרום לתנודות בפריסה. אם אי אפשר לשלוח גופן לפני שיש בו צורך, בדרך כלל תהיה שינוי פריסה כשמחליפים את הגופן. הגודל של שינוי הפריסה הזה עשוי להשתנות בהתאם למידת ההתאמה של הגופן החלופי לגופן האינטרנט. כדי לראות את התופעה הזו בפעולה, אפשר לצפות בהדגמה (דמו) ולהשוות בין השינויים בפריסה שמתרחשים בחיבור מהיר לעומת חיבור איטי.
הדוגמה הבאה משלבת שתי טכניקות ביצועים כדי לספק גופן באירוח עצמי במהירות האפשרית: שימוש בהצהרות גופנים מוטבעות ושימוש בפורמט הגופן WOFF2.
הצהרות גופנים מוטבעות: הטבעת
@font-faceוהצהרותfont-familyבמסמך הראשי, במקום לכלול את המידע הזה בגיליון סגנונות חיצוני, מאפשרת לדפדפן לקבוע אילו קובצי גופנים ישמשו בדף, ללא צורך להמתין להורדה של קובץ גיליון סגנונות נפרד. זה חשוב כי בדרך כלל דפדפנים לא יורידו קובצי גופנים עד שהם ידעו שנעשה בהם שימוש בדף. ברוב המקרים, עדיף להשתמש ב-preloadכדי לטעון גופנים להצהרות גופנים מוטבעות.WOFF2: מבין הגופנים המודרניים, WOFF2 הוא החדש ביותר, בעל התמיכה הרחבה ביותר בדפדפן ומציע את הדחיסה הטובה ביותר. מכיוון שהיא משתמשת ב-Brotli, WOFF2 דחוסה ב-30% טוב יותר מ-WOFF.
כדי לשפר את הביצועים עוד יותר, כדאי להשתמש בהגדרת המשנה של הגופן. הגדרת המשנה של הגופן היא תהליך של פיצול קובץ גופן לקבוצות משנה קטנות יותר – בדרך כלל במטרה להסיר גליפים שאינם בשימוש. הפעולה הזו יכולה לצמצם משמעותית את גודל הקובץ של גופן. הכלים ליצירת קבוצות משנה של גופנים כוללים את fontkit, subfont ו-glyphanger.
למידע נוסף על שיטות מומלצות לגופנים באירוח עצמי, ראו שימוש בגופנים באירוח עצמי.
דוגמה:
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>