לאחרונה, טכניקת הטמעת הפונטים באמצעות @fontface נהיית יותר ויותר מקובלת.
בפוסט הזה אסביר שלב אחרי שלב איך מטמיעים פונטפייס בעברית.
עקב מגבלות שיתוף פונטים בעברית, אינני יכול לספק לכם כאן תיקיה עם קבצי המקור, אך אסביר את הדרך לעשות זאת.
אז דבר ראשון קונים פונטים. כן, כן, קונים.
פונטים טובים דורשים השקעה, וגם תמיד כיף לתמוך במעצבי הפונטים הישראליים – אז תקנו פונטים שאתם אוהבים, זה שווה את זה.
רק חשוב מאוד לברר אם ברשיון של הפונט שלכם גם מותרת ההטמעה בדפי אינטרנט.
שלב א’ – הכנת קבצים
מכיוון שלא כל הדפדפנים תומכים בכל הפונטים וגם לא בכל דרכי ההטמעה, צריך ליצור מספר סוגי קבצים מהפונט הרצוי.
איך עושים את זה? נכנסים לFont Face Generator של Font Squirrel, ושם עושים את הדבר הבא:
איך יוצרים פונטפייס
הנה ההסבר:
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 שתרצו.
עד כה בדקנו את זה בie7,8 סאפארי, Firefox אייפון ואייפד. הכל נראה כשורה.
נשמח לדעת אם יש לכם הערות/הצעות יעול לתהליך.
חשוב שוב להזכיר -יש לבדוק שהרשיון של הפונט שברשותכם מרשה הטמעה ברשת בצורה זו.
עדכון חשוב לפוסט (דצמבר 2011):
מאז שפוסט זה יצא לאויר חברות מאסטרפונט ופונטביט עדכנו את הרשיון שלהם עם תנאים חדשים לפיהם אין אפשרות להטמעת הפונטים שלהם ברשת אלא אם בקניית שירות נוסף לכך.
לדוגמה הטמעת הפונטים של מאסטרפונט נעישת על ידי fonts.com ברכישת מנוי של 10$ לחודש (כך אנו מטמיעים פה באתר את פונט ‘אורון’).
זה אומר שאפילו אם שילמתם ורכשתם פונטים מאותן חברות – אם תרצו להטמיע את הפונטים באתרים שלכם תאלצו לרכוש שירות נוסף.
זה רק מדגיש את הצורך לברר טוב טוב עם יצרני הגופנים שלכם האם הטמעתם ברשת מותרת או אם צריך לרכוש שירות נוסף בשביל זה.
אז מה עושים במקרה זה?
ניתן להציע ללקוחות שלנו (או למחלקה האחראית בארגון בו אנו עובדים) לרכוש את המנוי לשירות ההטמעה על מנת להטמיע את הפונט הרצוי באתר…
זה חבל שאין לנו פה עוד פונטים אופן סורס בארץ, אבל זה מה שיש כרגע.
אם מישהו מכיר פונטים שניתן לרכוש בייחד עם רשיון הטמעה בפונטפייס שיכתוב כאן בתגובה.
בדקתם מול חברות הפונטים הישראליות שזה תהליך שמקובל עליהן מבחינה חוקית?
הייתי שמחה לראות אישור מפונטביט ומסטרפונט ששימוש כזה כלול בתנאי הרישיון שהם נותנים לפונטים שלהם.
הי חמוטל, מתפקידו של כל אדם לבדוק מול החברה שלו אם זה חוקי או לא חוקי, אנחנו לא יכולים לקחת אחריות על זה. לעומת זאת, אני כן אנסה ליצור קשר עם החברות כדי להחזיר לך תשובה יותר מספקת.
למה לא עובד????
ראה כאן
http://www.zakai.com/dw/font
הי ליאורה, אני אשמח לעזור, איזה פונט ניסית להטמיע? והאם עברת על כל השלבים כאן שלב שלב?
כמו כן האם יש לך נסיון עם css?
תודה.
שלום חמוטל,
תנאי רשיון השימוש במסטרפונט אינם מתירים התקנה על שרת או הטמעה. רכישת פונטים "פונטפייס" דורשת הרשמה ורשיון מיוחד, זול במיוחד. לפרטים:
http://www.masterfont.co.il/home/doc.aspx?mCatID=14560
חג שמח,
צביקה
אני קצת מבולבל, נראה שב-pixelperfect אתם משתמשים בפונט אורון מוטמע ולא בשירות של fonts.com
אין לכם בעיה חוקית עם זה?
כן, האמת שמדובר בחוק חדש, יש לציין. לכן גם אנחנו בפיקסל פרפקט כעת צריכים להחליט- האם ללכת על fonts.com או האם להחליף לפונט אחר. בכל מקרה השירות של fonts.com הוא אמין ויציב, וגם נוח לשימוש. יצא לי להשתמש בו לפונטים באנגלית בעבר. אולי אכתוב עליו פוסט בהזדמנות.
שלום
אתה יכול להמליץ היכן לרכוש פונטים.
תודה
מלון הכל כלול אילת
היי דני,
לגבי פונטים בעברית יש לך מספר מקורות לקניית פונטים בארץ, ביניהם:
מסטרפונט http://www.masterfont.co.il ,
פונטביט http://www.fontbit.co.il,
יינק יונטף http://www.fontef.com,
מיכל סהר, "הגילדה", http://www.hagilda.com
עודד עזר http://www.odedezer.com
ואני יודע שוודאי יש כמה ששחכתי אבל אין שום דבר שחיפוש מהיר בגוגל לא יניב.
בהצלחה!
This is way more helpful than atynihng else Ive looked at.
היי שגיא,
עוד על טיפוגרפיה ברשת בעברית:
http://ezerfamily.blogspot.com/2010/11/blog-post_6268.html
http://www.bakufsa.com/web-font-embedding
http://www.bakufsa.com/web-fonts-examples
תודה רבה!!!!!!!!!!!!!!!!!!!!!!!!
הפוסט מעולה ושימושי.
אבל אני חייב לומר משהו על מה שאני רואה בסצינת העיצוב המקומית:
רוב אתרי הפונטים שצוינו בתגובות מזעזעים ברמת השימושיות (כלומר, אם בכלל הם הצליחו לעלות על הדפדפן החדשני שעוד לא הגיע לארץ – כרום).
המחירים – בשמיים. לא, סליחה, לא בשמים – בחלל! הפונט עולה יותר מעיצוב פרימיום לאתר, אחסון לשנתיים ומזכירה.
בתור מישהו שמתעסק עם אתרים בחו"ל, ההצצה לשוק המקומי מבהירה לי שוב שהוא לא הולך להתפתח לשום מקום בקרוב.
לא סתם האתרים בארץ מזעזעים למראה – עם מחירים כאלו אני לא מאשים את המפתחים שמוותרים על עיצוב.
שוק הווב בארץ לא הולך להתפתח בקרוב. האתרים ימשיכו להיכתב כאן בדוט-נט, ללא אג'אקס וללא עיצוב. ואם האתר עובד באקספלורר 6 – צריך להגיד תודה. לנצח ישלטו פה ווי-נט ווואלה.
סליחה על השליליות, אני דווקא אדם אופטימי בטבעי…
היי יוגב, האמת שאני ממש יכול להסכים איתך לגבי רוב הדברים ובמיוחד לגבי מהות התגובה שלך.
האמת היא כזאת – שאין אף פונט אופן סורס איכותי בארץ. זאת אחת הבעיות שלנו כאן מבחינת התפתחות טיפוגרפית. המחירים הגבוהים של הפונטים שלנו כאן לא מוסיפים למרות שהם גם לא כל כך גבוהים- פשוט החבילות הינן גדולות ואין חבילות קטנות המותאמות לפרילנסרים או לעסקים קטנים. כמו כן אין אף דרך נוחה לנסות להשתמש בפונט לפני שקונים אותו מלבד להשיג אותו בדרכים לא דרכים ואז רק להחליט.
לגבי המצב של העיצוב ווב בארץ – אני דוקא ער למגמת התפכחות ושיפור וזאת אחת הסיבות שלשמה הקמנו את פיקסל פרפקט – כדי להרים את רמת העיצוב והסטנדרטים פה בארץ וליישר קו עם העולם. אני מאמין שאם נקיים פה קהילה של מעצבים אשר כולם ישאפו לשיפור והתקדמות אנו נוכל להגיע למצב בארץ שכמו שאנו בין המובילים בעולם מבחינת הסטארטאפים והאיכויות אנוש- כך גם נמצב את עצמנו מבחינה עיצובית.. אבל זה יקח המון שנים עד שזה יקרה. האירופאים נולדים לתרבות של מוזאונים והשראה מגיל 0…
לעומת זאת אפשר רק להיות אופטימיים ולשאוף לשיתופיות ופרגון בכל מה שקשור לעיצוב בארץ- להגיע לארועים לתמוך במיזמים ומעצבים איכותיים ולעודד אותם.
תודה רבה! מדריך מעולה!!
שנים אני מחכה לכך שנוכל להשתמש בפונטים עבריים באתרים.
דרך אגב, התגובה של רוזנברג כל כך אופיינית למי שמכיר את החברה והאנשים הפועלים..
תודה רבה על המדריך, הוא קצר קולע ושימושי מאד לכל אלה שמאד רוצים שהאתר שלהם יראה ייחודי ואחיד!
אני חייב לציין שגם בתחום הפעולה שלי, שהוא ייחודי משלו הSMART PHONES, שהוא צר מבחינת ייחודיות הפונטים של כל מכשיר היה קל להטמיע את הפונטים, אוכל לומר שנכון לעכשיו הצלחתי להטמיע אותו ב- IPHONE, IPAD, GALAXY S 1,2
בעולם שבו הדפדפנים הוא רחב הרבה יותר מדפדפני ה-DESKTOP (בין 20 – 30 שקיימים כיום בסלולר) האוירה היא שלכל מכשיר פונטים שונים והאתרים נראים שונים ומשונים בין סוגי הדפדפנים… צורת העבודה בה הFONT-FACE נכנס לתמונה, יוצרת אחידות זאת, ולדעתי תחום זה ילך ויטמע יותר ויותר בהמשך..
בוודאי שיש גופנים חופשיים בעברית.
מוזר שעדיין לא שמעתם על קולמוס http://culmus.sourceforge.net/
אני מכיר לא מעט אתרים שמטמיעים אותם.
ניסיתי עם הפונט Leha.tff (כתב יד) ומשום מה הקבצים הנוצרים מציגים כתב דפוס.
יש למישהו מושג למה?
יש המון דרכים שבהם זה יכול להשתבש אם לא עושים את זה כמו שצריך. נסה שוב לעבור על ההוראות המפורטות ולבדוק אם ההטמעה שלך הייתה נכונה.
כתבה מצויינת! תודה רבה!
רציתי רק להוסיף שניתן גם לרכוש פונטים נהדרים באתר http://www.tmlfonts.com
מומלץ בחום!
האם יש שיטה להטמיע פונטים דרך מערכת בלוגר של גוגל?
תודה רבה מראש
שלום עליכם
איך עושים את זה ברמה שלוורדפרס\תוסף בלי לגעת בתבנית