Search

טעינת פונטים באמצעות 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 *;
}

עד כאן.

רועי יוסף
רועי יוסף

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

6 תגובות...
  • אלון 5 אוגוסט 2019, 22:25

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

    // Helper mixin for self-hosted fonts
    @mixin fontFace($family, $src, $weight: normal, $style: normal) {
      @font-face {
        font-family: $family;
        font-display: auto;
        src: url('#{$src}.eot');
        src: url('#{$src}.eot?#iefix') format('embedded-opentype'), url('#{$src}.woff') format('woff'), url('#{$src}.woff2') format('woff2'), url('#{$src}.ttf') format('truetype'), url('#{$src}.svg##{$family}') format('svg');
        font-style: $style;
        font-weight: $weight;
      }
    }

    ומשתמשים בו ככה

    @include fontFace('somefontname', '../fonts/fontfile', 400);
    • רועי יוסף 5 אוגוסט 2019, 22:27

      הופה, Very Very Nice! תודה ששיתפת אלון 🙂

      • רועי יוסף 5 אוגוסט 2019, 22:29

        ואם היית דואג גם לשם משפחה אז הייתי יודע שזה אלון קצירי התותח שמדבר פה… 🙂

        • אלרון 24 ספטמבר 2020, 4:08

          מיקסינ חמוד, תודה על השיתוף! יהיה נחמד אם היה אפשר היה להגדיר איזה סיומות קבצים יש ואיזה אין (נגיד למשל יש רק woff2 ואין קבצים אחרים. אני לא משתמש ב eot יותר). זה אפשרי?

          • רועי יוסף 24 ספטמבר 2020, 11:56

            כמובן, פשוט תוריד את ה source של סוג הפונטים שאינך משתמש בהם:

            // Helper mixin for self-hosted fonts
            @mixin fontFace($family, $src, $weight: normal, $style: normal) {
                @font-face {
                    font-family: $family;
                    font-display: auto;
                    src:  url('#{$src}.woff2') format('woff2');
                    font-style: $style;
                    font-weight: $weight;
                }
            }
            • אלרון 25 ספטמבר 2020, 2:23

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

              @include fontFace('somefontname', '../fonts/fontfile', 400, ['woff2', 'woff']);
              @include fontFace('somefontname', '../fonts/fontfile', 400, ['woff2']);
              @include fontFace('somefontname', '../fonts/fontfile', 400, ['woff2', 'eot', 'svg']);

              הבנת את כוונתי?

תגובה חדשה

Up!
לבלוג