שימוש בפונט ייחודי עם @font-face

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

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

מה צריך?

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

במקרה של דוגמה זו העברתי את הקובץ Gabriola.ttf לתיקיה בשם fonts.

ובתג הראש (head) נקשר הפונט לדף כך:

@font-face{
	font-family: 'Gabriola';
	src: url('fonts/Gabriola.ttf');
}

h1{
	font-family:Gabriola;
}

 

אחרי שקישרנו את הפונט (לא לשכוח שזה צריך להיות בתוך תג הסטייל או עדיף בקובץ css חיצוני) יישמנו אותו על כל כותרת מסוג h1.

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

כך תראה התוצאה הסופית:

customfont

ובזה סיימנו. פשוט מהיר וחוסך המון כאבי ראש.

עדכון: לאחר עוד נסיונות ועוד לימוד ראיתי שצריך לפרט יותר בנושא.

ראשית, IE (נו מה?) דורש פונטים מפורמט .eot ואילו דפדפנים אחרים דורשים בפורמט otf או ttf. כך שאנחנו חייבים לתת להם תמיכה ראויה.

שנית, IE עושה כמה בעיות כאשר מציינים פורמטים שונים ולכן צריך לייצר את הקוד באופן הבא:

@font-face {
    font-family: Gabriola;
    src: url('fonts/Gabriola.eot');    
    src: local('☺'), url('fonts/Gabriola.ttf') format("truetype"),
                     url('fonts/Gabriola.woff') format("woff");
}

ועתה הפונט יתפקד כראוי בדפדפנים שתומכים בפונט-פייס.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *