כיצד לטעון פונטים מותאמים באמצעות font-face@

@font-face הוא חוק ב CSS המאפשר שימוש בפונטים מותאמים (Custom Fonts) עבור הטקסט באתר שלכם. אותם פונטים יכולים להטען משרת חיצוני באמצעות הפונקציה url() או מהמחשב האישי של הגולש באתר שלכם באמצעות הפונקציה local().

@font-face מאפשר לבעלי אתרים לספק פונטים משלהם ומסיר את הגבלת השימוש בפונטים "בטוחים" בלבד (web safe fonts), הלא הם אותם פונטים הנמצאים במחשב של מרבית האוכלוסיה כמו Arial, Times New Roman, Georgia וכדומה.

קיים פוסט הרלוונטי למאמר זה ומדבר על טעינה של Google Fonts לוקאלית מהשרת שלכם בו הטכניקה המוצגת מתבצעת באמצעות font-face@ בדיוק כפי שמוסבר במדריך זה.

החוק font-face@

השימוש ב @font-face ידרוש מכם לספק נתיב לקובץ פונט כלשהו הנמצא באותו דומיין בו נמצא קובץ ה CSS המשתמש בחוק זה. פונטים מותאמים צריכים להיות מאוחסנים בשרת שלכם ולא בשרת חיצוני. (עוד על כך בנספח מטה).

font-face@ – סִינְטָקְס ודרכי שימוש

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

אידיאלית, על חוק ה @font-face להיות מוגדר בקובץ ה CSS הראשי שלכם וברמה הבסיסית ביותר עליו להכיל את התכונה font-family והתכונה src. הנה דוגמה:

@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}

בדרך כלל תמצאו את חוקי ה font-face@ בתחילת קובץ ה CSS.

הערך של font-family יהיה השם בו תשתמשו אחר כך כאשר תרצו להשתמש בפונט המדובר בעמוד עבור טקסט כלשהו באתר שלכם:

h1 {
  font-family: Lato, sans-serif;
}

שימו לב כי סיפקנו עבור src שני ערכים כאשר הערך הראשון הוא עבור פורמט עדכני יותר הנקרא woff2 הנטען מהר יותר ובעל משקל קטן יותר.

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

ניתן כמובן לספק עתודות נוספות:

@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff'),
       url(/assets/fonts/Lato.ttf) format('truetype');
}

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

הגדרות עיצוב ומשקל הפונט

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

התכונות בהן ניתן להשתמש הם font-style, font-variant, font-weight ו-font-stretch.

אפשרות זו שימושית במיוחד במצבים בהם ישנן מספר וריאציות לפונט מסוים תחת אותו השם. לדוגמה:

@font-face {
  font-family: Lato;
  src: local("Lato"),
       url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}
@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato-LightItalic.woff2) format('woff2'),
       url(/assets/fonts/Lato-LightItalic.woff) format('woff');
 font-weight: 200;
 font-style: italic;
}

כעת ניתן להשתמש בגירסה הרזה (light version) והנטויה (italic) של הפונט עבור תגיות מסוג H1 למשל ולהשתמש בגירסה הרגילה עבור פיסקאות כבדוגמה הבאה:

h1, p {
  font-family: Lato, sans-serif;
}
h1 {
  font-weight: 200;
  font-style: italic;
}

טעינה של פונט מהמחשב האישי של הגולש

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

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(/assets/fonts/Lato.woff2) format('woff2');
  font-weight: bold;
}

עד כאן טוב ויפה, אך כיצד אנו יכולים לשלוט בדרך בה נטענים אותם פונטים?

אם אתם מכירים את המושג FOUT או FOIT, תנו מבט בפוסט המסביר בפירוט על התכונה font-display ועל הדרך להשתמש בה.

# נספח – האם חייבים שהפונטים יוגשו מאותו דומיין?

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

הקישור הבא הוא קישור לקובץ ה CSS שנמצא בשרתים של גוגל ומאפשר שימוש בפונט Assistant. שימו לב כי קיימות שם הגדרות font-face@ כפי שראינו בפוסט זה אך הקובץ מוגש מדומיין אחר. הכיצד?

גוגל מאפשרים בשרת שלהם Access-Control-Allow-Origin או CORS. אם נבצע בקשת cURL מהכתובת savvy.co.il לכתובת המופיע בקישור בצורה הבאה:

Roees-MBP-New:forter roeeyossef$ curl -H "Origin: https://savvy.co.il" --verbose \
>   -H "Access-Control-Request-Method: POST" \
>   -H "Access-Control-Request-Headers: X-Requested-With" \
>   -X OPTIONS --verbose \
> https://fonts.googleapis.com/css?family=Assistant

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

> Host: fonts.googleapis.com
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: https://savvy.co.il
> Access-Control-Request-Method: POST
> Access-Control-Request-Headers: X-Requested-With
< HTTP/2 200

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

הדרך לעשות זאת בשרתי Apache היא משהו בסגנון הבא:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff|woff2)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

הדרך לעשות זאת בשרתי Nginx היא כבדוגמה הבאה:

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)|(woff2)$){
	add_header Access-Control-Allow-Origin *;
}

שאלות נפוצות

לסיכום

החוק @font-face מעניק לכם שליטה מלאה על טעינת פונטים מותאמים באתר. הגדירו את שם הפונט באמצעות font-family, ספקו את הנתיב לקובץ באמצעות src, ותמיד רשמו WOFF2 ראשון עם WOFF כעתודה.

ניתן להגדיר וריאציות של משקל וסגנון תחת אותו שם משפחה, ולהשתמש ב-local() כדי לבדוק את מחשב המשתמש לפני ההורדה. עבור פונטים מ-origin אחר, הפעילו CORS בשרת והוסיפו את התכונה crossorigin בעת טעינה מראש.