מבוא לגופנים משתנים באינטרנט

מפרט גופן חדש שיכול להקטין באופן משמעותי את גודל קובצי הגופן

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

תאימות דפדפן

החל ממאי 2020, רוב הדפדפנים תומכים בגופנים ניתנים להתאמה. למידע נוסף, ראו האם אפשר להשתמש בגופנים משתנים? וחלופות.

מבוא

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

מושג נוסף שאנשים לא תמיד מבינים הוא ההבדל בין סגנון לבין משפחה. סגנון הוא גופן יחיד וספציפי, כמו מודגש נטוי, ומשפחה היא הקבוצה המלאה של הסגנונות.

לפני גופנים משתנים, כל סגנון יושם כקובץ גופן נפרד. בגופנים משתנים, כל הסגנונות יכולים להיכלל בקובץ אחד.

אתגרים למעצבים ולמפתחים

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

למעצבי אתרים ולמפתחי אתרים יש מגבלות שונות מאלה של מעצבים גרפיים, ואחת מהן היא עלויות רוחב הפס המשויכות לעיצובים שלנו. זו הייתה חשיבות עליונה לחוויות טיפוגרפיות עשירות יותר, כי הן עולות כסף. בגופני אינטרנט רגילים, כל סגנון בעיצובים שלנו דורש מהמשתמשים להוריד קובץ גופנים נפרד. הפעולה הזו מאריכה את זמן האחזור ואת זמן הרינדור של דפים. אם תכללו רק את הסגנונות 'רגיל' ו'מודגש', וגם את הסגנונות המקבילים שלהם בכתב נטוי, נתוני הגופן יכולים להגיע ל-500KB או יותר. זה עוד לפני שעסקנו באופן עיבוד הגופנים, בדפוסי החלופה שבהם אנחנו צריכים להשתמש, או בתופעות לוואי לא רצויות כמו FOIT ו-FOUT.

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

המבנה של גופן משתנה

גופנים משתנים כדי להתמודד עם האתגרים האלה על ידי אריזת סגנונות בקובץ אחד.

כדי לעשות זאת, מתחילים בסגנון מרכזי או בסגנון 'ברירת מחדל', בדרך כלל 'רגיל' – עיצוב רומי ניצב עם העובי והרוחב האופייניים ביותר שמתאים במיוחד לטקסט פשוט. לאחר מכן הוא מחובר לסגנונות אחרים בטווח רציף שנקרא 'ציר'. הציר הנפוץ ביותר הוא weight, שיכול לחבר את סגנון ברירת המחדל לסגנון Bold. אפשר למקם כל סגנון בנפרד לאורך ציר, והוא נקרא 'מכונה' של גופן המשתנה. במקרים מסוימים, מפתח הגופן הוא זה שמגדיר את השם. לדוגמה, המיקום 600 בציר המשקל נקרא SemiBold.

לגופן המשתנה Roboto Flex יש שלושה סגנונות לציר Weight. הסגנון הרגיל נמצא במרכז, ושני סגנונות נמצאים בקצוות הנגדיים של הציר, אחד בהיר יותר והשני כהה יותר. אפשר לבחור מתוך 900 מכונות:

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

כלומר, יש אלפי סגנונות! אולי זה נראה כמו overkill, אבל המגוון הזה של סגנונות גופן יכול לשפר באופן משמעותי את חוויית הקריאה. בנוסף, אם אין פגיעה בביצועים, מפתחי האתרים יכולים להשתמש בכמה סגנונות או בכמה שיותר סגנונות – זה תלוי בעיצוב שלהם.

נטוי

האופן שבו נעשה שימוש בכתב נטוי בגופנים משתנים מעניין, כי יש שתי גישות שונות. לגופנים כמו Helvetica או Roboto יש קווי מתאר תואמים לעיבוד באמצעות אינטרפולציה, כך שאפשר לבצע אינטרפולציה בין הסגנונות הרומני והנטוי שלהם, ולהשתמש בציר Slant כדי לעבור מהסגנון הרומני לסגנון הנטוי.

בגופנים אחרים (כמו Garamond,‏ Baskerville או Bodoni) יש קווי מתאר של גליפים רגילים וגליפים נטויים שלא תואמים לעיבוד באמצעות אינטרפולציה. לדוגמה, הקווים שמגדירים בדרך כלל את האות 'n' רגילה קטנה לא תואמים לקווים שמגדירים את האות 'n' נטוי קטן. במקום לבצע אינטרפולציה של קו מתאר אחד לקו מתאר אחר, הציר Italic עובר מקו מתאר רומי לקו מתאר נטוי.

אחרי המעבר לכתב נטוי, הצירים שיהיו זמינים למשתמש אמורים להיות זהים לאלה של כתב רומי, וכך גם קבוצת התווים.

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

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

הגדרות של צירים

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

גם אם צירים יכולים לשלוט באותה תכונה, יכול להיות שהם ישתמשו בערכים שונים. לדוגמה, בגופנים של המשתנים Oswald ו-hepta Slab יש רק ציר אחד זמין, weight, אבל הטווחים שונים – Oswald נמצא באותו טווח כמו לפני השדרוג למשתנה, 200 עד 700, אבל Hepta Slab יש לה משקל קיצוני של קו השיער ב-1 שנע עד 900.

לחמשת הצירים הרשומים יש תגים קטנים בני 4 תווים המשמשים להגדרת הערכים שלהם ב-CSS:

מפתח הגופן הוא זה שמגדיר אילו צירים יהיו זמינים בגופן משתנה ואילו ערכים הם יכולים לקבל, ולכן חשוב לבדוק מה כל גופן מציע. המסמכים של הגופן אמורים לספק את זה, או שאפשר לבדוק את הגופן באמצעות כלי כמו Wakamai Fondue.

תרחישים לדוגמה ויתרונות

הגדרת ערכי הצירים היא עניין של טעם אישי ושימוש בשיטות מומלצות לטיפוגרפיה. הסכנה בכל טכנולוגיה חדשה היא שימוש לרעה אפשרי, והגדרות אומנויות או ניסיוניות מדי עלולות גם להפחית את הקריאוּת של הטקסט בפועל. כשמדובר בכותרות, אפשר לנסות כיוונים שונים כדי ליצור עיצובים אמנותיים נהדרים, אבל כשמדובר בטקסט בגוף המודעה, יש סיכון שהטקסט לא יהיה קריא.

ביטוי מרגש

דוגמה מצוינת לביטוי אמנותי מוצגת למעלה, חקירה של הגופן Decovar על ידי Mandy Michael.

אתם יכולים לראות את הדוגמה הפעילה ואת קוד המקור של הדוגמה שלמעלה כאן.

Animation

אפשר גם לנסות ליצור אנימציה של תווים באמצעות גופנים משתנים. למעלה יש דוגמה לצירים שונים שנעשה בהם שימוש עם משפחת גופנים Zycon. דוגמה לאנימציה פעילה ב-Axis Praxis

Anicons הוא הגופן הראשון בעולם של סמלים מונפשים בצבע, המבוסס על סמלי Material Design. Anicons הוא ניסוי שמשלב בין שתי טכנולוגיות גופנים מתקדמות: גופנים משתנים וגופנים צבעוניים.

Finesse

הגופנים Roboto Flex ו-Amstelvar כוללים קבוצה של 'צירים פרמטרים'. בצירים האלה האותיות מחולקות ל-4 היבטים בסיסיים של הצורה: צורות שחורות או חיוביות, צורות לבנה או שלילית והממדים x ו-y. בדומה לאופן שבו אפשר לשלב בין צבעים ראשיים לכל צבע אחר כדי לשנות אותו, אפשר להשתמש ב-4 ההיבטים האלה כדי לשפר כל ציר אחר.

הציר XTRA ב-Amstelvar מאפשר לשנות את הערך 'לבן' ל-mille, כפי שמוצג למעלה. באמצעות קטעי XTRA קטנים בכיוונים מנוגדים, אפשר לאזן את רוחב המילים.

גופנים משתנים ב-CSS

טעינת קבצים של גופנים משתנים

גופנים משתנים נטענים באמצעות אותו מנגנון @font-face כמו גופנים סטטיים רגילים לאינטרנט, אבל עם שני שיפורים חדשים:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. פורמטים של מקורות: אנחנו לא רוצים שהדפדפן יוריד את הגופן אם הוא לא תומך בגופנים משתנים, לכן אנחנו מוסיפים את התיאורים format ו-tech: פעם אחת בתחביר העתידי (format('woff2') tech('variations')) ופעם אחת בתחביר שהוצא משימוש אבל נתמך בדפדפנים (format('woff2-variations')). אם הדפדפן תומך בגופנים משתנים ותומך בתחביר העתידי, הוא ישתמש בהצהרה הראשונה. אם יש תמיכה בגופנים של משתנים ובתחביר הנוכחי, ייעשה שימוש בהצהרה השנייה. שניהם מצביעים על אותו קובץ גופן.

2. טווחי סגנונות: תוכלו לראות שאנחנו מספקים שני ערכים עבור font-weight ו-font-stretch. במקום לומר לדפדפן איזה משקל ספציפי הגופן הזה מספק (לדוגמה font-weight: 500;), אנחנו נותנים לו עכשיו את הטווח של המשקלים שהגופן תומך בהם. ב-Roboto Flex, טווח הציר Weight הוא מ-100 ל-1,000, ו-CSS ממפה ישירות את טווח הציר למאפיין הסגנון font-weight. כשמציינים את הטווח ב-@font-face, כל ערך מחוץ לטווח הזה 'מוגבל' לערך החוקי הקרוב ביותר. טווח הציר Width ממופה באותו אופן למאפיין font-stretch.

אם אתם משתמשים ב-Google Fonts API, הכול יטופל. קובץ ה-CSS יכיל את הפורמטים והטווחים המתאימים של המקור, ומערכת Google Fonts תשלח גם גופנים סטטיים חלופיים למקרה שאין תמיכה בגופנים משתנים.

שימוש במשקולות ובערכי רוחב

נכון לעכשיו, אפשר להגדיר באופן מהימן מ-CSS רק את הצירים wght דרך font-weight ואת הציר wdth דרך font-stretch.

באופן מסורתי, מגדירים את font-weight כמילת מפתח (light,‏ bold) או כערך מספרי בין 100 ל-900, בצעדים של 100. בעזרת גופנים משתנים אפשר להגדיר כל ערך בטווח width של הגופן:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

בדומה לכך, אפשר להגדיר את font-stretch עם מילות מפתח (condensed, ultra-expanded) או עם ערכי אחוזים:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

שימוש בכתב נטוי ובכתב מוטה

הציר ital מיועד לגופנים שמכילים גם סגנון רגיל וגם סגנון נטוי. הציר נועד לפעול כמתג הפעלה/כיבוי: הערך 0 כבוי ויוצג בו הסגנון הרגיל, והערך 1 יוצג בו הגופן נטוי. בניגוד לצירים אחרים, אין מעבר. ערך של 0.5 לא יניב 'חצי נטוי'.

הציר slnt שונה מהכתב נטוי בכך שהוא לא סגנון חדש, אלא רק גורם לכתב הרגיל להופיע בזווית. ערך ברירת המחדל שלו הוא 0, כלומר צורות ברירת המחדל של אותיות זקופות. ל-Roboto Flex יש שיפוע מקסימלי של 10 מעלות לכיוון שמאל, כלומר האותיות יטו שמאלה כשהערך ינוע מ-0 ל-10.

הגדרת הצירים האלה דרך המאפיין font-style נראית אינטואיטיבית, אבל נכון לאפריל 2020, עדיין לא ברור איך עושים זאת. לכן, בשלב הזה צריך להתייחס אליהם כצירים מותאמים אישית ולהגדיר אותם דרך font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

שימוש בגדלים אופטיים

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

הוספנו מאפיין CSS חדש לציר הזה: font-optical-sizing. כברירת מחדל הוא מוגדר ל-auto, וזה גורם לדפדפן להגדיר את ערך הציר על סמך font-size. כלומר, הדפדפן יבחר באופן אוטומטי את הגודל האופטי הטוב ביותר, אבל אם רוצים להשבית את האפשרות הזו, אפשר להגדיר את font-optical-sizing לערך none.

אפשר גם להגדיר ערך מותאם אישית לציר opsz, אם רוצים בכוונה להשתמש בגודל אופטי שלא תואם לגודל הגופן. קוד ה-CSS הבא יגרום להצגת הטקסט בגודל גדול, אבל בגודל אופטי כאילו הוא מודפס ב-8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

שימוש בצירים מותאמים אישית

בניגוד לצירים רשומים, צירים מותאמים אישית לא ימופו למאפיין CSS קיים, ולכן תמיד תצטרכו להגדיר אותם דרך font-variation-settings. תגים של צירים מותאמים אישית תמיד מודפסים באותיות רישיות, כדי להבדיל אותם מצירים רשומים.

ב-Roboto Flex יש כמה צירים מותאמים אישית, והחשוב ביותר הוא Grade (GRAD). ציר Grade מעניין כי הוא משנה את עובי הגופן בלי לשנות את הרוחב, כך שחלוקות השורות לא משתנות. כשמשחקים עם ציר ציונים, אפשר להימנע מאילוץ של שינויים בציר המשקל שמשפיעים על הרוחב הכולל, ואז שינויים בציר הרוחב שמשפיעים על המשקל הכולל.

GRAD הוא ציר מותאם אישית, עם טווח בין 200- ל-150 ב-Roboto Flex. עלינו לטפל בעניין מול font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

גופנים משתנים ב-Google Fonts

הקטגוריה של Google Fonts התרחבה עם גופנים משתנים, ואנחנו מוסיפים גופנים חדשים באופן קבוע. בשלב הזה, הממשק מיועד לבחירת מופעים בודדים מהגופן: בוחרים את הווריאנט הרצוי, לוחצים על 'בחירת הסגנון הזה' והוא מתווסף לרכיב <link> שאוסף את קובצי ה-CSS והגופנים מ-Google Fonts.

כדי להשתמש בכל הצירים או טווחי הערכים הזמינים, צריך לכתוב באופן ידני את כתובת ה-URL ל-Google Fonts API. בסקירה הכללית על גופנים משתנים מפורטים כל הצירים והערכים.

הכלי Google Variable Fonts Links (קישורים לגופנים של משתנים של Google) יכול גם לספק את כתובות ה-URL העדכניות ביותר לגופנים של המשתנים המלאים.

ירושה של הגדרות של וריאציות גופן

בקרוב תהיה תמיכה בכל הצירים הרשומים באמצעות מאפייני CSS קיימים, אבל בינתיים יכול להיות שתצטרכו להסתמך על font-variation-settings כחלופה. אם לגופן יש צירים מותאמים אישית, תצטרכו גם את font-variation-settings.

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

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

קודם הדפדפן יחיל את font-variation-settings: 'slnt' 10 מהקלאס .slanted. לאחר מכן הוא יחיל את font-variation-settings: 'GRAD' -200 מהקלאס .grade-light. אבל הפעולה הזו תאפס את slnt לברירת המחדל שלו, שהיא 0. התוצאה תהיה טקסט בגוון בהיר, אבל לא נטוי.

למרבה המזל, אפשר לעקוף את הבעיה הזו באמצעות משתני CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

משתני CSS יועברו בירושה, כך שאם רכיב (או אחד מההורים שלו) מוגדר כ-slnt‏ 10, הוא ישמור על הערך הזה גם אם תגדירו את GRAD לערך אחר. הסבר מפורט על השיטה הזו זמין במאמר תיקון ירושה של גופנים משתנים.

חשוב לזכור שאי אפשר להוסיף אנימציה למשתני CSS (לפי תכנון), ולכן קוד כזה לא יפעל:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

האנימציות האלה צריכות להתרחש ישירות ב-font-variation-settings.

שיפור בביצועים

גופנים משתנים מסוג OpenType מאפשרים לנו לשמור כמה וריאציות של משפחת גופנים בקובץ גופן אחד. ב-Monotype ערכו ניסוי שכלל שילוב של 12 גופנים של קלט כדי ליצור שמונה עוביים, בשלושה רוחבים, בסגנון נטוי ובסגנון רומי. אחסון של 48 גופנים נפרדים בקובץ גופן אחד עם משתנה אחד הוביל להקטנה של 88% בגודל הקובץ.

עם זאת, אם אתם משתמשים בגופן יחיד כמו Roboto Regular ולא משתמשים בגופנים אחרים, יכול להיות שלא תבחינו בשיפור משמעותי בגודל הגופן אם תעבירו אותו לגופן משתנה עם הרבה צירים. כמו תמיד, הבחירה תלויה בתרחיש לדוגמה.

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

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

אם אתם משתמשים בגופנים של Google, מומלץ לבצע התחברות מראש אל https://fonts.gstatic.com, הדומיין שבו מתארחים הגופנים של Google. כך הדפדפן ידע מראש איפה לקבל את הגופנים כשהם יופיעו ב-CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

הטיפ הזה תקף גם ל-CDN אחרים: ככל שתאפשרו לדפדפן להגדיר חיבור לרשת מוקדם יותר, כך הוא יוכל להוריד את הגופנים מוקדם יותר.

ראו טיפים נוספים לשיפור הביצועים של טעינת Google Fonts במאמר הגופנים המהירים ביותר של Google.

חלופות ותמיכה בדפדפן

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

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

בדפדפנים ישנים יותר, טקסט עם הכיתוב .super-bold יוצג בכתב מודגש רגיל, כי זהו הגופן המודגש היחיד שזמין לנו. כשיש תמיכה בגופנים משתנים, אנחנו יכולים להשתמש בפועל במשקל הכבד ביותר, 1,000.

הכלל @supports לא נתמך ב-Internet Explorer, ולכן בדפדפן הזה לא יוצגו עיצובים. אם הבעיה הזו רלוונטית לכם, תמיד תוכלו להשתמש באחד מהטריקים הישנים כדי לטרגט דפדפנים ישנים רלוונטיים.

אם אתם משתמשים ב-Google Fonts API, הוא יטפל בחיוב הגופנים המתאימים לדפדפנים של המבקרים. נניח שמבקשים את הגופן Oswald בטווח משקל 200 עד 700, כך:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

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

תודה

המאמר הזה נוצר בעזרת האנשים הבאים:

• Mustafa Kurtuldu, מעצב UX ותומך עיצוב ב-Google
• רואל ניסקנס (Roel Nieskens), מעצב/מפתח UX ומומחה טיפוגרפיה ב-Kabisa
• דייב קרוסלנד (Dave Crossland), מנהל תוכנית, Google Fonts
• David Berlow, מעצב גופנים וטיפוגרף ב-Font Bureau
• לורנס Penney, מפתח של axis-praxis.org
• מנדי מייקל, מפתח של variablefonts.dev

התמונה הראשית (Hero) של Bruno Martins ב-Unsplash.