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

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

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

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

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 פיקסלים)

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