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

נניח שמצאנו פונט נחמד באתר של Dafont, ניקח את הפונט: Old London

נוריד אותו לתיקייה בשם fonts בפרויקט שלנו:

כך נראית התיקייה

ובתוך קובץ ה-Style שלנו נזין את הקוד הבא:

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

body
{
font-family: Almog;
}

מה שהקוד אומר בסה"כ זה פשוט:

מגדירים בעזרת פקודת font-face@ את הפונט החדש כאשר בשורה הראשונה נתנו שם (אני נתתי את השם Almog, זה כמובן יכול להיות כל שם אחר).

בשורה השנייה אנחנו מקלידים את הנתיב של הפונט, כלומר איפה שהוא שמור כרגע: תיקיית fonts שאליה הורדנו את קובץ הפונט.

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

זה הכל! מה שנשאר לנו לעשות הוא להקליד את הטקסט שלנו והוא כבר יופיע.