מדריך להטמעת פונט רשת

אחרי הדיבורים והדוגמאות מגיע שלב המעשים. hands on, ככה מטמיעים פונט רשת באתר אינטרנט.

1. העלאת הקבצים לשרת

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

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

2. הטמעת הפונט בעזרת @font-face

כך נראה הקוד להטמעת רץ במשקל רגיל:

  @font-face {
      font-family: 'Rutz_OERegularPro';
      src: url('rutz_oeregpro-Rutz.eot');
      src: url('rutz_oeregpro-Rutz.eot?iefix') format('eot'),
           url('rutz_oeregpro-Rutz.woff') format('woff'),
           url('rutz_oeregpro-Rutz.svg#webfontXqjqfm2I') format('svg');
      font-weight: normal;
      font-style: normal;
  }

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

  <link rel="stylesheet" href="/fonts/stylesheet.css">

3. הגדרת font-family לאלמנטים הרצויים

כדי להגדיר לכל המסמך את המשקל הרגיל כותבים משהו כזה:

body {
  font:16px/1.4 "Rutz_OERegularPro", arial, sans-serif;
}

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

הדגשות

במקום font-weight:bold נגדיר את המשקל המודגש ב-font-family יחד עם font-weight:normal:

h1,h2,h3,h4,h5,h6,b,strong {
  font-family:"Rutz_OEBoldPro", arial, sans-serif;
  font-weight:normal;
}

התאמת לועזי לעברי

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

לדוגמא, אם פונט רץ לא היה מכיל גם את vesper, היינו צריכים להטמיע את ווספר בנפרד, לעטוף את המילים הלועזיות ב-bdo

<h1>הילכו עברית ו-<bdo>English</bdo> יחדיו?</h1>

ואז להוסיף את הכלל הבא ב-css:

h1 bdo,h2 bdo,h3 bdo,h4 bdo,h5 bdo,h6 bdo,b bdo,strong bdo {
  font-family:"VesperBoldPro", arial, sans-serif;
  font-weight:normal;
}

4. בדיקה

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

פונט רץ בשלוש מערכות הפעלה
פונט "רץ" כפי שהוא נראה במערכות הפעלה שונות (דפדפן פיירפוקס) - לחצו על התמונה כדי לראות את הדוגמא החיה בדפדפן שלכם

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

תגיות:, , , ,

8 תגובות

  1. איך אני ממיר פונט רגיל ל-eot, svg ו-woff ?

    אבי

  2. אהלן,

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

    מצד שני – אני משתגעת כבר יום שלם בניסיון להבין את הדבר הבא:

    רשמת –
    "ניתן להעתיק את הקוד המוכן שיוצר פונטסקווירל לתוך ה-css שלכם"

    ל-א-ן בתוכו?? אם רוצים להעתיק את הקוד לתוך מסמך ה- css הקיים
    (לדוגמא כשבונים אתר באמצעות – http://www.weebly.com)
    לאיזה חלק במסמך אמורים להעתיק אותו?

    אשמח מאד, אם תוכל לחלץ אותי.. (לפני שאני מוצאת גג נוח לקפוץ ממנו :))

    נ.ב
    תוך כדי השאלה.. וקריאה דקדקנית נוספת של תאור הפעולות הנדרשות,
    עלתה לי מחשבה.. כשרשמת "תיקייה בשרת".. האם הכוונה לתיקייה מסויימת?
    כי דרך weebly אני רק יכולה להעלות את הקבצים באופן כללי, ולא למיקום מסויים.

    תודה רבה!!

    יוניקית
      1. בתוך וויבלי, תחת הלשונית Design מופיע בצד ימין למעלה: Edit HTML/CSS
      2. תחת Files לחצי על Add new file ובחרי מהמחשב שלך את כל קבצי הפונטים שהורדת מפונטסקווירל. אמורים להיות ארבעה סוגי קבצים לכל משקל: eot, ttf, woff, svg
      3. אחרי שכל הקבצים עלו, עברי לעריכת קובץ ה-css בוויבלי (מופיע תחת הכותרת CSS)
      4. פתחי את קובץ ה-css של פונטסקווירל שנמצא במחשב שלך, והעתיקי מתוכו את כל הקוד
      5. הדביקי את הקוד בתחילת קובץ ה-css בוויבלי, כך זה צריך להראות
      6. בתוך קובץ ה-css, הוסיפי כללים מתאימים להגדרת הפונט שלך לאלמנטים שאת רוצה, למשל משהו כזה
      7. הנה התוצאה הסופית

  3. תודה לביא.. על הטרחה וההסבר המדוייק.
    מה שחסרו לי הם הגרשיים… 🙂

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

    נ.ב.
    כתמורה לסיוע שלך אני (כמעט) מוכנה לתת לך את מתכון השמרים השמור של אמא שלי ;-))

    יוניקית

    • הי יוניקית!

      האם תוכלי להסביר לי כיצד להפוך את ה Weebly שלי לתומך עברית…
      הכתב יוצא בחלק השמאלי של הדף וסימני הפיסוק עפים לכל עבר..

      תודה!

      אריק

  4. רעיון נחמד לשימוש בשני פונטים בטקסט דו לשוני.
    מישהו מכיר פתרון אוטומטי לעיטוף של טקסט לועזי באלמנט bdo (או span)?
    ניסיתי את ה-Regex הבא, אבל הטקסט שלי מכיל גם תגי HTML שנעטפים גם הם:
    preg_replace('%((?:(?:[a-z]+s+)+(?:[a-z]+))|(?:[a-z]+))%im', '$1', $string);
    תודה!

    אריאל

  5. תודה על ההסבר – חסר החלק של תאימות לאייפון/אייפד.
    אם משתמשים ב- @font-face עם הקוד הזה אז צריך להחליף את ה-id בשורה של ה-svg:

    url('rutz_oeregpro-Rutz.svg#webfontXqjqfm2I') format('svg');
    ל-

    url('your font#your font id') format('svg');

    את ה-id של הפונט שלכם תוכלו למצוא אם תפתחו את קובץ svg של הפונט בעזרת עורך html
    ושם תחפשו את השורה:

    רק כך תוכלו לראות את הפונט שלכם באייפון/אייפד.
    …

    דידי