רצינו להטמיע טקסט חי באתר חינוך פיננסי, ולהשתמש בפונט Liddar. עד עכשיו כשרצינו להשתמש בפונט שאינו מערכתי, יצרנו תמונות , אבל זמן קצר לפני שהתחלתי לתכנת את האתר הזה, קראתי את הפוסט פה שמדבר על המאפיין @font-face ב-CSS3. כשראיתי שזה עובד ב-IE – בניגוד לחוקי CSS3 רבים אחרים – רשמתי את זה לעצמי בזכרוני, וכשהגעתי לתכנות האתר של חינוך פיננסי, שלפתי את המאמר הזה.
אחרי קריאה מרפרפת על המאמר, הגעתי לקופסה בצבע חקי – הת’כלס: בסעיף 1, יש 5 תתי סעיפים. זה כל התהליך שצריך לעשות (אני אפילו הסתפקתי ב-4 הסעיפים הראשונים). Font Squirrel עושה את כל העבודה – הוא אפילו נותן בסוף ZIP עם קבצי HTML, CSS וקבצי הפונטים הרלוונטיים. אני פשוט העתקתי את קבצי הפונטים ואת הגדרות ה-CSS מהקובץ שהוא נתן לקובץ שלי (כמובן שיניתי את המסלול של קבצי הפונטים בהתאם למסלול שלהם בפרוייקט שלי) – ו וואלה!
הערה חשובה לפונטים בעברית: אם משתמשים בפונטים בעברית, אזי ב-@font-face kit generator צריך לבחור את אופציית ה-expert, ואז באופציית ה-subsetting יש לבחור Custom Subsetting, ובתפריט שנפתח יש לבחור – תחת Language – בעברית. וזהו.
למי שבכל זאת רוצה להעמיק, Smashing Magazine בדיוק כתבו על זה (כנראה לכבוד השקת אתר חינוך פיננסי…).
(ולמי שתוהה למה בכותרת של האתר השתמשתי בכל זאת בתמונה, זה היה בעצת המעצבת. מאחר שהפונט הזה נראה בדפדפן קצת פחות טוב ממה שהוא נראה בפוטושופ, הוחלט שהכותרת ראויה למראה הטוב ביותר של הפונט הזה, ולכן שמנו תמונה)
עובד!
הרבה זמן חיפשתי דרך לכתוב בעברית ותמיד יצא לי רווחים ריקים.
ניסיתי את מה שכתבת ופעל מעולה בכל הדפדפנים!
תודה רבה.
איזה כיף, תודה ששיתפת!