מאת שגיא שרייבר | PixelPerfect
בפוסט הזה אסביר שלב אחרי שלב איך מטמיעים פונטים בעברית באתר שלכם באמצעות font-face@ – פקודה פשוטה ב-CSS.
עקב מגבלות שיתוף פונטים בעברית, אינני יכול לספק לכם כאן תיקיה עם קבצי המקור, אך אסביר את הדרך לעשות זאת.
מאיפה מביאים את הפונטים?
זה נושא למאמר נפרד, אבל דבר ראשון קונים פונטים. כן, כן, קונים. פונטים טובים דורשים השקעה, וגם תמיד כיף לתמוך במעצבי הפונטים הישראליים – אז תקנו פונטים שאתם אוהבים, זה שווה את זה. רק חשוב מאוד לברר אם ברשיון של הפונט שלכם גם מותרת ההטמעה בדפי אינטרנט.
דבר שני אתם מוזמנים להיכנס לרשימת פונטים חינמיים בעברית כאן באתר ותוכלו להטמיע גם אותם (רק שוב – בררו עם הרשיון של כל אחד מה ההיתר לשימוש ברשת).
שלב א' – הכנת קבצים
מכיוון שלא כל הדפדפנים תומכים בכל הפונטים וגם לא בכל דרכי ההטמעה, צריך ליצור מספר סוגי קבצים מהפונט הרצוי.
במדריך הבא אני משתמש ב-Font-face Generator של Font Squirrel, אבל ישנם עוד כלים דומים ברשת שצמחו מאז שהוצאתי את הפוסט הזה. אז אתם מוזמנים לחפש בגוגל את הביטוי "Font-face Generator"
להלן מה שעליכם לעשות ברגע שנכנסתם לשם (יכול להיות שהם ישנו טיפה את העיצוב מיום הכתבה הזאת אבל תבינו את העקרון):
הנה ההסבר:
1. מעלים את הפונט שלכם באמצעות הכפתור.
2. בוחרים ב- expert
3. בוחרים ב- custom Subsetting
4. מסמנים Hebrew
5. ניתן לסמן Punctuation או כל דבר שנראה לכם לעין
6. מוודאים בטבלה שכל האותיות נמצאות שם
7. מסמנים את הצ'קבוקס שהפונטים חוקיים להטמעה בווב (במידה והם כן, רצוי לברר זאת מול החברה/מעצב שקניתם ממנו את הפונט).
8. מורידים את הערכה למחשב.
שלב ב':
העלאת הקבצים לאתר בתכלס מכאן הכל נהיה קל יותר.
בתיקייה שהורדתם עכשיו נמצאים הקבצים הרלוונטיים והיא אמורה להראות כמו בתמונה הבאה:
– גשו לתיקיית האתר שבו אתם רוצים להטמיע את הפונט/ים, ספציפית לתקייה בה קובץ הcss של האתר.
– זרקו (או העתיקו) לתוך התקיה עם הcss של האתר שלכם את כל קבצי הפונטים מתיקיית הפונטפייס שלכם. זה אומר קובץ woff, ttf, svg, eot.
שלב ג' – טיפול בcss
– פתחו את קובץ ה-css שנמצא בתיקיית הפונטפייס שהורדתם למחשב.
– העתיקו את כל הקוד שם.
– פתחו את קובץ הcss של האתר שבו תרצו להטמיע את הפונט.
– הדביקו את שורות הקוד שהעתקתם מקודם בראש הקובץ css של האתר שלכם.
מזל טוב – בשלב זה הטמעתם את הפונטפייס באתר שלכם!
עכשיו כל מה שנותר לכם לעשות, זה להשתמש בביטוי של font-family כמו שכתוב בקוד בכל class או id שתרצו.
רוצים לקבל הדרכה יותר מפורטת על איך תכלס מטמיעים את הפונט? קבלו את ההדרכה להטמעת פונטפייס ב-CSS והעלאת הקבצים לשרת מאת הבלוג המצוין בבקופסא של לביא פרצ'יק ואליהו לב.
עד כה בדקנו את זה בie7,8 סאפארי, Firefox אייפון ואייפד. הכל נראה כשורה.
עדכון (ינואר 2013): נכון ליום זה כל הדפדפנים בשוק כבר תומכים בפונטפייס.
עדכון (דצמבר 2011): מאז שפוסט זה יצא לאויר חברות מאסטרפונט ופונטביט עדכנו את הרשיון שלהם עם תנאים חדשים לפיהם אין אפשרות להטמעת הפונטים שלהם ברשת אלא אם בקניית שירות נוסף לכך.
לדוגמה הטמעת הפונטים של מאסטרפונט נעישת על ידי fonts.com ברכישת מנוי של 10$ לחודש (כך אנו מטמיעים פה באתר את פונט 'אורון').
זה אומר שאפילו אם שילמתם ורכשתם פונטים מאותן חברות – אם תרצו להטמיע את הפונטים באתרים שלכם תאלצו לרכוש שירות נוסף.
זה רק מדגיש את הצורך לברר טוב טוב עם יצרני הגופנים שלכם האם הטמעתם ברשת מותרת או אם צריך לרכוש שירות נוסף בשביל זה.
אז מה עושים במקרה זה?
ניתן להציע ללקוחות שלנו (או למחלקה האחראית בארגון בו אנו עובדים) לרכוש את המנוי לשירות ההטמעה על מנת להטמיע את הפונט הרצוי באתר…
