איך מטמיעים פונטים באמצעות css בלבד – כן, כן, פונטפייס בעברית!

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

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

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

שגיא שרייבר

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

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

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

  • ליאורה

    למה לא עובד????
    ראה כאן
    http://www.zakai.com/dw/font

    • הי ליאורה, אני אשמח לעזור, איזה פונט ניסית להטמיע? והאם עברת על כל השלבים כאן שלב שלב?
      כמו כן האם יש לך נסיון עם css?
      תודה.

  • שלום חמוטל,

    תנאי רשיון השימוש במסטרפונט אינם מתירים התקנה על שרת או הטמעה. רכישת פונטים "פונטפייס" דורשת הרשמה ורשיון מיוחד, זול במיוחד. לפרטים:
    http://www.masterfont.co.il/home/doc.aspx?mCatID=14560
    חג שמח,
    צביקה

  • אני קצת מבולבל, נראה שב-pixelperfect אתם משתמשים בפונט אורון מוטמע ולא בשירות של fonts.com
    אין לכם בעיה חוקית עם זה?

    • כן, האמת שמדובר בחוק חדש, יש לציין. לכן גם אנחנו בפיקסל פרפקט כעת צריכים להחליט- האם ללכת על fonts.com או האם להחליף לפונט אחר. בכל מקרה השירות של fonts.com הוא אמין ויציב, וגם נוח לשימוש. יצא לי להשתמש בו לפונטים באנגלית בעבר. אולי אכתוב עליו פוסט בהזדמנות.

  • Pingback: עשר "מכות" טיפוגרפיות - בקופסא()

  • Pingback: 5 דברים שאתם צריכים לדעת על פונטי רשת - בקופסא()

  • שלום
    אתה יכול להמליץ היכן לרכוש פונטים.
    תודה
    מלון הכל כלול אילת

  • רותי
  • אלעד

    תודה רבה!!!!!!!!!!!!!!!!!!!!!!!!

  • Pingback: חצי שנה לפיקסל פרפקט- והזמנה לרשת המעצבים Forrst | פיקסל פרפקט מגזין()

  • יוגב

    הפוסט מעולה ושימושי.
    אבל אני חייב לומר משהו על מה שאני רואה בסצינת העיצוב המקומית:
    רוב אתרי הפונטים שצוינו בתגובות מזעזעים ברמת השימושיות (כלומר, אם בכלל הם הצליחו לעלות על הדפדפן החדשני שעוד לא הגיע לארץ – כרום).
    המחירים – בשמיים. לא, סליחה, לא בשמים – בחלל! הפונט עולה יותר מעיצוב פרימיום לאתר, אחסון לשנתיים ומזכירה.
    בתור מישהו שמתעסק עם אתרים בחו"ל, ההצצה לשוק המקומי מבהירה לי שוב שהוא לא הולך להתפתח לשום מקום בקרוב.
    לא סתם האתרים בארץ מזעזעים למראה – עם מחירים כאלו אני לא מאשים את המפתחים שמוותרים על עיצוב.
    שוק הווב בארץ לא הולך להתפתח בקרוב. האתרים ימשיכו להיכתב כאן בדוט-נט, ללא אג'אקס וללא עיצוב. ואם האתר עובד באקספלורר 6 – צריך להגיד תודה. לנצח ישלטו פה ווי-נט ווואלה.
    סליחה על השליליות, אני דווקא אדם אופטימי בטבעי…

    • היי יוגב, האמת שאני ממש יכול להסכים איתך לגבי רוב הדברים ובמיוחד לגבי מהות התגובה שלך.
      האמת היא כזאת – שאין אף פונט אופן סורס איכותי בארץ. זאת אחת הבעיות שלנו כאן מבחינת התפתחות טיפוגרפית. המחירים הגבוהים של הפונטים שלנו כאן לא מוסיפים למרות שהם גם לא כל כך גבוהים- פשוט החבילות הינן גדולות ואין חבילות קטנות המותאמות לפרילנסרים או לעסקים קטנים. כמו כן אין אף דרך נוחה לנסות להשתמש בפונט לפני שקונים אותו מלבד להשיג אותו בדרכים לא דרכים ואז רק להחליט.
      לגבי המצב של העיצוב ווב בארץ – אני דוקא ער למגמת התפכחות ושיפור וזאת אחת הסיבות שלשמה הקמנו את פיקסל פרפקט – כדי להרים את רמת העיצוב והסטנדרטים פה בארץ וליישר קו עם העולם. אני מאמין שאם נקיים פה קהילה של מעצבים אשר כולם ישאפו לשיפור והתקדמות אנו נוכל להגיע למצב בארץ שכמו שאנו בין המובילים בעולם מבחינת הסטארטאפים והאיכויות אנוש- כך גם נמצב את עצמנו מבחינה עיצובית.. אבל זה יקח המון שנים עד שזה יקרה. האירופאים נולדים לתרבות של מוזאונים והשראה מגיל 0…
      לעומת זאת אפשר רק להיות אופטימיים ולשאוף לשיתופיות ופרגון בכל מה שקשור לעיצוב בארץ- להגיע לארועים לתמוך במיזמים ומעצבים איכותיים ולעודד אותם. :)

  • תודה רבה! מדריך מעולה!!
    שנים אני מחכה לכך שנוכל להשתמש בפונטים עבריים באתרים.
    דרך אגב, התגובה של רוזנברג כל כך אופיינית למי שמכיר את החברה והאנשים הפועלים..

  • Pingback: השראה בשישי 23-12-11 | פיקסל פרפקט מגזין()

  • Pingback: לינקים לעבודות המטופלות מהכיתה ועוד()

  • ערן בייצ'ר

    תודה רבה על המדריך, הוא קצר קולע ושימושי מאד לכל אלה שמאד רוצים שהאתר שלהם יראה ייחודי ואחיד!
    אני חייב לציין שגם בתחום הפעולה שלי, שהוא ייחודי משלו הSMART PHONES, שהוא צר מבחינת ייחודיות הפונטים של כל מכשיר היה קל להטמיע את הפונטים, אוכל לומר שנכון לעכשיו הצלחתי להטמיע אותו ב- IPHONE, IPAD, GALAXY S 1,2
    בעולם שבו הדפדפנים הוא רחב הרבה יותר מדפדפני ה-DESKTOP (בין 20 – 30 שקיימים כיום בסלולר) האוירה היא שלכל מכשיר פונטים שונים והאתרים נראים שונים ומשונים בין סוגי הדפדפנים… צורת העבודה בה הFONT-FACE נכנס לתמונה, יוצרת אחידות זאת, ולדעתי תחום זה ילך ויטמע יותר ויותר בהמשך..

  • בוודאי שיש גופנים חופשיים בעברית.
    מוזר שעדיין לא שמעתם על קולמוס http://culmus.sourceforge.net/

    אני מכיר לא מעט אתרים שמטמיעים אותם.

  • ניסיתי עם הפונט Leha.tff (כתב יד) ומשום מה הקבצים הנוצרים מציגים כתב דפוס.
    יש למישהו מושג למה?

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

  • כתבה מצויינת! תודה רבה!
    רציתי רק להוסיף שניתן גם לרכוש פונטים נהדרים באתר http://www.tmlfonts.com
    מומלץ בחום!

  • Pingback: איך מטמיעים פונטים באמצעות css בלבד – כן, כן, פונטפייס בעברית! | פיקסל פרפקט מגזין » Web Design()

  • האם יש שיטה להטמיע פונטים דרך מערכת בלוגר של גוגל?
    תודה רבה מראש

  • יאיר

    שלום עליכם
    איך עושים את זה ברמה שלוורדפרס\תוסף בלי לגעת בתבנית

  • שנית

    שאלה ל-"חתול"
    ידוע לך אם השימוש בפונטים של אתר-culmus חוק (לאתרים)?
    ולמה הכוונה "חופשיים" – כלומר ללא תשלום חודשי, או ללא תשלום בכלל?

  • Pingback: פוסט אורח: על יצירת הפונט הפתוח "נוט" | אות פתיחה()

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

    • אלון, שאלתך כלל לא קשורה למאמר הזה, אבל אני יכול לומר לך שבמקומות שיש אפשרות לתגובות פייסבוק אין שליטה על גודל הפונט (למיטב ידיעתי)

  • טל

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

  • FreeSoft

    פוסט מענין, תודה.
    רשיון שימוש יכול להיות פשוט להפליא. כמובן שאפשר להתחיל לדבר על ערכי קוד פתוח ותוכנה חופשית אך נראה כי אעבור לעיקר:
    חבילת פונטים מפרויקטים שונים מבוססי קוד פתוח להורדה ישירה:
    http://opensiddur.org/wp-content/uploads/2010/07/Open-Siddur-Project-Hebrew-Font-Pack-1.8.zip
    ולחשדנים….:
    http://opensiddur.org/2010/07/unicode-compliant-and-open-source-licensed-hebrew-fonts/

    ברוכים הבאים לחופש…. : – )

  • http://culmus.sourceforge.net/fancy/index.html הפונטים בפרוייקט קולמוס חופשיים להורדה ולשימוש. חלקם מגיעים כחלק ממערכת ההפעלה של הפצות הלינוקס השונות (אובונטו, אופן סוזה). הפונטים בפורמט tar.gz וברישיון GNU-GPL (חופשיים לשימוש אך לא לשינוי)

    enjoy!

  • אלכס

    שלום לכולם,

    הכל טוב ויפה עם fontface אבל:
    1. לקחתי פונט בעברית והפכתי אותו ל-webfont לפי המדריך. הפונט החדש לא נראה טוב בגדלים מסוימים. אותיות זזות למעלה ולמטה. יש דרך לטפל בזה?
    2. במידה ורכשתי את הפונט בו אני משתמש לפני שחברות הפונטים שינו את הרישיונות, השינויי הזה חל עלי?
    אני הרי רכשתי אותו עם רישיון שמאפשר להשתמש בפונט לכל הצרכים שלי.

    תוה מראש על התשובה!

  • תודה על המדריך, הוא מאוד עזר לי. יצרתי בזכותו מאגר פונטי ווב חינמיים בעברית:
    http://freefonts.co.il

  • יואב

    פוסט מעניין בהחלט, ממליץ בחום על הפונטים של פונטייפ http://www.fontype.co.il פונטים מותאמים לרשת במחירים טובים וללא הגבלת אתרים, מנסיון.

  • אסתר

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

  • Pingback: מדריך להטמעת פונט רשת - בקופסא()

  • אסתר

    תודה רבה!

    אשמח גם אם תוכל לסייע לנו בבעיה הבאה:
    ישנם פונטים מסויימים שלאחר המרה נשמטת האות ל', ובמקומה מופיעה נקודה, (כמו חולם)
    כמה שאני מנסה לשחק שם אם האפשרויות, זה לא עוזר,
    אשמח לשמוע את דעתך ממה יכול לנבוע כזה דבר.
    תודה רבה על הרצון לעזור!!
    אסתר.

  • אסתר

    היי שגיא,
    האם בדקת את העניין?
    אשמח להתעדכן, זה חשוב לכולנו!
    תודה מראש!!
    אסתר

  • סטו

    צריך לעדכן את המדריך

קבלת ה PDF מותנית ברישום לניוזלטר שלנו. הניוזלטר נשלח פעם בשבוע ובו אך ורק תכנים איכותיים שנבחרו בקפיצה, ומתאימים למעצבים, יזמים, מתכנתים, אנשי שיווק ועוד. אם תראו שהתוכן אינו רלוונטי עבורכם, תוכלו להצאת מרשימת התפוצה בכל עת.

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: