איך מטמיעים פונטים באמצעות css בלבד - כן, כן, פונטפייס בעברית!
בפוסט הזה אסביר שלב אחרי שלב איך מטמיעים פונטים בעברית באתר שלכם באמצעות  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$ לחודש (כך אנו מטמיעים פה באתר את פונט 'אורון').
זה אומר שאפילו אם שילמתם ורכשתם פונטים מאותן חברות – אם תרצו להטמיע את הפונטים באתרים שלכם תאלצו לרכוש שירות נוסף.
זה רק מדגיש את הצורך לברר טוב טוב עם יצרני הגופנים שלכם האם הטמעתם ברשת מותרת או אם צריך לרכוש שירות נוסף בשביל זה.

אז מה עושים במקרה זה?
ניתן להציע ללקוחות שלנו (או למחלקה האחראית בארגון בו אנו עובדים) לרכוש את המנוי לשירות ההטמעה על מנת להטמיע את הפונט הרצוי באתר…

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

Share

קצת על המחבר:

שגיא שרייבר מעצב UI & UX, מייסד של פיקסל פרפקט מגזין, וקו-מייסד של הסטרטאפ Tapdog למעקב אחר אתרים ותחרות ברשת. בוגר שנקר במגמה לעיצוב מדיה אינטראקטיבית. מתמחה בעיצוב אתרים מונחי conversion (המרה) וחווית משתמש, ובעל ידע נרחב ב-html, css ו- wordpress. ניתן למצוא את שגיא  בפורטפוליו שלובטוויטרבלינקד אין או מכדרר בדריבל.

תמצאו את שגיא שרייבר ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

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

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
;