כמה טיפים להטמעת גופנים

פורסם בתאריך מאת חתול פורסם ב-מחשביםTagged , , , , , ,

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

ההטמעה היא פשוטה מאוד. משתמשים ב־font-face כדי להטמיע את קובץ הגופן ואז ניתן להגדיר אותו לטקסט כמו כל גופן.

@font-face {
font-family: KeterAramTsova;
src: local("Keter Aram Tsova"),
url("KeterAramTsova.ttf"),
url("KeterAramTsova.eot"); /* For IE */
}
.blog-name {
font-family: KeterAramTsova,'Segoe UI',Arial,Helvetica,sans-serif;
}

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

בינתיים יש כמה פתרונות שמתקנים את הבעיה או לפחות משפרים אותה.

  • להסיר מקובץ הגופן את התווים המיותרים – כדי להאיץ את טעינת הקובץ כדאי להקטין את הנפח שלו. בעזרת תכנה לעריכת קובצי גופנים כמו fontforge ניתן לפתוח את קובץ הגופן ולהסיר ממנו את כל התווים שאין לנו צורך בהם. אני מחקתי מהקובץ את כל התווים באנגלית וביידיש וכמעט את כל סימני הפיסוק ונשארתי עם אותיות הא״ב, זה צמצם את גודל הקובץ פי עשרה.
  • להפעיל מטמון – בעזרת הוספת השורות הבאות לקובץ ‎.‎htaccess בשרת, אנחנו נגדיר לדפדפן לא להוריד כל פעם את הקובץ מהשרת אלא לטעון אותו מהמטמון.

    ExpiresActive on
    ExpiresByType font/truetype             "access plus 1 month"
    ExpiresByType font/opentype             "access plus 1 month"
    ExpiresByType font/woff                 "access plus 1 month"
    ExpiresByType image/svg+xml             "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

  • להפעיל דחיסת gzip על הגופנים – לא מצאתי ממש דוגמה טובה לזה אז אני מקווה שהקוד הבא מספיק טוב, לקחתי אותו מתוך html5boilerplate. גם אותו מוסיפים לקובץ ‎.htaccess



    FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
    FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
    FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
    FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype


  • אפשר גם להפעיל קוד JavaScript שיעכב את הצגת הדף עד לטעינת הגופן. אצל פול אייריש יש כמה רעיונות.

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

13 מחשבות על “כמה טיפים להטמעת גופנים”

  1. הגב
    אלכסנדר יודייב says:

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

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

    גופנים ישנים בעברית שאינם מותאמים לווב לא כ"כ עובדים באקספלורר.

    אלכס

  3. הגב
    אלכסנדר יודייב says:

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

    לדגמה, קיבלתי עיצוב להמרה והיה שם שימוש ב FF-Meta גופן.
    בפועל הוא נראה כך: http://new.myfonts.com/fonts/fontfont/ff-meta.
    אבל בוואב הוא נראה אחרת לגמרה https://typekit.com/fonts/ff-meta-web-pro.

  9. הגב
    יאיר says:

    נהדר
    לאור הגופנים שמוצעים כאן, וכדי להיות רגוע ב100% אני רוצה למחוק מהווינדוס שלי את כל הגופנים שאספתי בדרכים לא ברורות
    * יש לי תיקייה מקבילה שמכילה את כל הגופנים שהתקנתי אי פעם כך שאני יודע בדיוק באיזה גופנים מדובר – מדובר בכמות גדולה…
    יש למישהו רעיון איך אני מוחק את כל מה שהתקנתי וחוזר לגופנים המקוריים שמגיעים עם הווינדוז בלבד?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *