מדריך להטמעת פונט רשת
אחרי הדיבורים והדוגמאות מגיע שלב המעשים. 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 פיקסלים)

רוצים לדעת איך יוצרים את הגרסאות האלו של הפונט להטמעה באתר? תוכלו למצוא את ההדרכה לכך בפוסט על הטמעת פונטפייס בעברית באתר פיקסל פרפקט מגזין מאת שגיא שרייבר.
איך אני ממיר פונט רגיל ל-eot, svg ו-woff ?
באתר font-squirrel יש כלי שממיר פונט רגיל לכל הפורמטים שציינת
אם מדובר על פונט עברי יש מדריך בבלוג פיקסל פרפקט איך עושים את זה
בכל אופן, פונטים קנויים דורשים רשיון מיוחד כדי להשתמש בפורמטים האלו באתר חי, כפי שהסברתי בפוסט קודם
אהלן,
יופי של פוסט.. מצד אחד. הצלחתי לעשות את הרוב:
לייצר קיט של פונט עברי עבור הווב.
להעלות את קבצי הפונטים לשרת.
ולהעתיק את הקוד שפייספונט יוצרים.
מצד שני – אני משתגעת כבר יום שלם בניסיון להבין את הדבר הבא:
רשמת –
"ניתן להעתיק את הקוד המוכן שיוצר פונטסקווירל לתוך ה-css שלכם"
ל-א-ן בתוכו?? אם רוצים להעתיק את הקוד לתוך מסמך ה- css הקיים
(לדוגמא כשבונים אתר באמצעות – http://www.weebly.com)
לאיזה חלק במסמך אמורים להעתיק אותו?
אשמח מאד, אם תוכל לחלץ אותי.. (לפני שאני מוצאת גג נוח לקפוץ ממנו :))
נ.ב
תוך כדי השאלה.. וקריאה דקדקנית נוספת של תאור הפעולות הנדרשות,
עלתה לי מחשבה.. כשרשמת "תיקייה בשרת".. האם הכוונה לתיקייה מסויימת?
כי דרך weebly אני רק יכולה להעלות את הקבצים באופן כללי, ולא למיקום מסויים.
תודה רבה!!
תודה לביא.. על הטרחה וההסבר המדוייק.
מה שחסרו לי הם הגרשיים… 🙂
מאחר ושם הפונט שלי היה בן מילה אחת חשבתי שלא צריך אותם.
מסתבר שדווקא כן…
נ.ב.
כתמורה לסיוע שלך אני (כמעט) מוכנה לתת לך את מתכון השמרים השמור של אמא שלי ;-))
הי יוניקית!
האם תוכלי להסביר לי כיצד להפוך את ה Weebly שלי לתומך עברית…
הכתב יוצא בחלק השמאלי של הדף וסימני הפיסוק עפים לכל עבר..
תודה!
רעיון נחמד לשימוש בשני פונטים בטקסט דו לשוני.
מישהו מכיר פתרון אוטומטי לעיטוף של טקסט לועזי באלמנט bdo (או span)?
ניסיתי את ה-Regex הבא, אבל הטקסט שלי מכיל גם תגי HTML שנעטפים גם הם:
preg_replace('%((?:(?:[a-z]+s+)+(?:[a-z]+))|(?:[a-z]+))%im', '$1', $string);
תודה!
תודה על ההסבר – חסר החלק של תאימות לאייפון/אייפד.
אם משתמשים ב-
@font-face
עם הקוד הזה אז צריך להחליף את ה-id
בשורה של ה-svg:url('rutz_oeregpro-Rutz.svg#webfontXqjqfm2I') format('svg');
ל-
url('your font#your font id') format('svg');
את ה-
id
של הפונט שלכם תוכלו למצוא אם תפתחו את קובץ svg של הפונט בעזרת עורך htmlושם תחפשו את השורה:
רק כך תוכלו לראות את הפונט שלכם באייפון/אייפד.
…