גופני רשת – סוף סוף גופנים מיוחדים לאינטרנט

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

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

בעברית, כמעט ואין אפשרות בחירה בין "פונטים בטוחים לרשת", אך גם לדוברי האנגלית, עד לפני זמן לא רב, לא היו אפשרויות מתקדמות במיוחד לעיצוב פונטים באינטרנט. אלמנט font-face@ ב-css3 משנה את התמונה. תרתי משמע. שימוש בגופני רשת מאפשר להציג פונטים מיוחדים בדפדפן, גם אם הפונט הזה לא מותקן במחשב של המשתמש. ולא רק זה. ניתן גם להגדיר צל לטקסט, קו מיתאר, ואפילו גרדיאנט. פעולות שעד היום חייבו את טעינת הטקסט כתמונה.

איך זה עובד?

בגדול, הרעיון הוא פשוט – במקום לשלוף את הפונט מהמחשב של המשתמש, הדפדפן שולף אותו מהשרת, יחד עם התמונות והקבצים האחרים. קישור פונט רשת לדף HTML עובד על אותו עקרון של הגדרת פונטים שהכרנו קודם. בקובץ ה- css יש להגדיר את משפחת הפונטים הרצויה בעזרת האלמנט font-face@ ואת מקור הפונט, כלומר, הקישור לפונט שנמצא בשרת. לאחר מכן, בתוך הגדרות של סלקטור מסוים בו רוצים להשתמש בפונט, מציינים את משפחת הפונטים, הפונט והמשקל הספציפי וכל שאר ההגדרות כמו הטייה, צל וכו'.

הנה דוגמא:

הגדרת משפחה בעזרת @font-face

@font-face {

font-family: 'Rutz_OERegularPRO';

src: url('rutz_oeregpro-Rutz.eot');

}

הגדרת סגנון טקסט לסלקטור body

body {

font:16px/1.4 "Rutz_OERegularPRO", sans-serif;

color:rgba(7,206,250,0.5);

text-shadow:18px0px0#AD0918;

}

אפשרויות הטמעה

שתי הדרכים העיקריות בהן ניתן להטמיע גופני רשת הן: הטמעה עצמית וקישור לספריית פונטים. האפשרות הראשונה היא העלאה של הפונטים לשרת בו נמצא האתר. האפשרות השניה היא קישור לספריית פונטים חיצונית המארחת מספר פונטים על השרתים שלה. ישנן חברות המציעות מגוון פונטים לשימוש ברשת עבור תשלום חודשי ויש אף אפשרויות חינמיות כמו, למשל, (מי אם לא גוגל)  google web-fonts.

אבל איך אפשר לבחון פונט שנטען מהשרת בשלב העיצוב? פלאגין מיוחד לפוטושופ שנקרא Web Font Plug-in מאפשר להגדיר פונט מתוך ספריית גופני הרשת של גוגל או ספריית WebINK (ספרייה חיצונית שמציעה מגוון די גדול של גופני רשת חינם לאחר הרשמה. באנגלית, כמובן) תוך כדי תהליך העיצוב בפוטושופ, ממש כמו פונט שמותקן על המחשב שלכם. לאחר שהחלטתם על פונט, ניתן להוסיף אותו ל"אוסף שלכם" באחד האתרים הנ"ל ולייצר את ה-CSS המתאים, גם דרך הממשק באתרים אלו.

ככה זה נראה

הנה כמה דוגמאות לאתרים המשתמשים בגופני רשת לעיצוב טקסט באתר:

כמה דברים שצריך לדעת

בפוסט "5 דברים שאתם צריכים לדעת על פונטי רשת" של לביא פרצ'יק, הוא מדבר על הנקודות שצריך לקחת בחשבון כשמשתמשים בגופני רשת:

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

תמיכת דפדפנים
ישנם כמה פורמטים של גופני רשת בהם משתמשים הדפדפנים השונים:

• ttf – פורמט כבד יחסית שרוב הדפדפנים יודעים להשתמש בו
• eot – פורמט של מייקרוסופט בו משתמש אינטרנט אקספלורר
• svg – לדפדפנים באייפון ואייפד
• woff – פורמט חדש וקל המיועד לאינטרנט ונתמך על-ידי גרסאות חדשות של דפדפנים (פיירפוקס 3.6, כרום 6.0, אופרה 11.10, ספארי 5.1)

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

תצוגה

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

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

עברית?!

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

החלוץ של פונטים לרשת בעברית הוא עודד עזר המציע מגוון פונטים ומשקלים. גם חברות הפונטים הגדולות מציעות פונטים עם רשיון מיוחד לרשת (שאינו כולל רשיון לשימוש בדפוס). המחירים משתנים. ניתן לרכוש גופן רשת לתקופה מוגבלת וכמות מקסימום של צפיות בדף, ולחלופין, לתקופה בלתי-מוגבלת וללא תלות במספר צפיות. המחיר נע בין 70 ש"ח ל-550 ש"ח לפונט.

ומה לגבי ספריות חיצוניות? באתר fonts.com, למשל, ישנן כ-800 משפחות פונטים בעברית וברכישת מנוי ב-10$ לחודש, תוכלו להשתמש בחלק מהן. האפשרויות החינמיות בעברית, עם זאת, לא משמחות במיוחד. מצאתי רק את קולומוס, שהיא ספריית פונטים ברשיון חופשי הכוללת גרסאות רשת של הפונטים מרים, אהרוני ודוד ועוד כמה סוגים בקטגוריית fancy fonts. כדאי גם לציין את הפרויקט "אות פתיחה" לפיתוח פונט עברי חופשי המותאם לתצוגה על-גבי מסך. את הפרויקט מוביל מושון זר-אביב והוא זוכה לתמיכת איגוד האינטרנט הישראלי במסגרת מענקי התמיכה לפרויקטי קוד פתוח לשנת 2011.

 

סכום

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

מקורות

Controlling Web Typography

5 דברים שאתם צריכים לדעת על פונטי רשת

מדריך להטמעת פונט רשת