התקנת גופן וובפונט / גופן רשת:

1. העלו את הגופנים לשרת האתר שלכם

עדיף להעלות את הקבצים אל תוך תיקייה עצמאית - למשל ‪‬webfont,
לשם פשטות ההתקנה יש למקם אותה באותו מיקום בו נמצאת גם תיקיית ה-‪‬css של האתר.

2.לאחר מכן יש לבצע טעינה של הגופן בתוך קובץ ה-css

א. לשם נוחות תחזוקת הקוד עדיף לטעון את הגופנים באמצעות קובץ css יעודי למשל - font-load.css
בקובץ ה-css יש להוסי‪ף‬ את שורות הקוד הבאות, אשר טוענות את הגופן:

@font-face{
font-family: 'MyWebFontName';
src: url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.eot');
src: url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.eot?#iefix') format('embedded-opentype'),
url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.woff') format('woff'),
url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.woff2’) format('woff2’),
url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.ttf') format('truetype'),
url('WebFonts_Folder_Full_URL_Path/My-Web-Font-File-Name.svg#webfont') format('svg');
font-style: normal;
font-weight: 400; /*Regular*/;}

שימו לב להנחיות הבאות:

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

ג. הסימון בשחור הוא הכתובת המלאה של התיקייה בה נמצאים קבצי הגופנים שרכשתם - ואותו צריך לחליף בכתובת המלאה של התיקייה בה נמצאים קבצי הגופנים שרכשתם.
לדוגמא - WebFonts_Folder_Full_URL_Path הופך להיות http://mysite.com/webfont.

ד. הסימון באדום בקוד הוא שם הקובץ של הגופן - ואותו צריך לחליף בשם הקובץ של הגופן שרכשתם.
לדוגמא - My-Web-Font-File-Name.eot הופך להיות avshalom-regular-webfont.eot,
הקפידו לשנות כמו בדוגמא רק את שם הפונט ולא את שם סיימות הקבצים (החלק שאחרי הנקודה כולל הנקודה).

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

ו. הסימון בכחול בקוד - הוא סיווג המשקל של הפונט ויש לשנות את הערך המספרי בהתאם למשקל הפונט שרכשתם בהתאם לרשימה הבאה:
עבור גופן במשקל - EX-LIGHT - יש לשנות את הערך ל- 100
עבור גופן במשקל - LIGHT - יש לשנות את הערך ל- 200
עבור גופן במשקל - REGULAR - יש לשנות את הערך ל- 400
עבור גופן במשקל - MEDIUM - יש לשנות את הערך ל- 600
עבור גופן במשקל - BOLD - יש לשנות את הערך ל- 700
עבור גופן במשקל - BLACK - יש לשנות את הערך ל- 800

3. זהו התקנתם את הפונט

כל מה שנותר עכשיו זה לבצע קריאה של הפונט מתוך קבוץ ה-css לתוך מאפיייני העיצוב של האלמנטים השונים באתר שלכם.
לדוגמא פקודת css המגדירה את כל האלמנטים מסוג p באתר שיציגו את הפונט אבשלום במשקל קל:

p {
font-family: 'avshalom', serif;
font-weight: 200; /*LIGHT*/;
}

4. הגופן שרכשתם

בתוך קובץ הזיפ של הגופן שרכשתם קיים קובץ בשם demo.zip - קובץ זה מכיל דוגמא של עמוד html שטוען את הגופן שרכשתם.
קובץ זה מדגים את השימוש בשיטה הכתובה פה.
ניתן להשתמש בקובץ font-load.css המקושר לעמוד זה ונמצא בתיקיית css על מנת לבצע טעינה של הגופן לאתר שלכם.
השימוש כמובן יעשה לאחר עריכת קובץ זה והזנת הנתיב המוביל אל תיקיית הוגפן שלכם על גבי השרת (סעיף-2 ג') בבמדריך זה.

5. לקריאה נוספת:

מדריך להתקנת וובפונט
מדריך נוסף להתקנת וובפונט
מדריך לפתרון בעיות נפוצות בהתקנת וובפונט
ההיסטוריה של הוובפונט

בהצלחה