A weboldalak készítése során egyszer eljön az idő, amikor az alap betűtípusok: Arial, Verdana, Sans serif, stb. nem lesznek megfelelőek számunkra, ezért másikat kell használnunk.

A beállított betűtípussal viszont ügyelni kell. Ha egy olyan szmámítógépről nézi a látogató a weboldalt, amelyen hiányzik a beállított betűtípus, nagy a valószínűsége, hogy az oldal nála nem lesz olyan, mint azt szeretnénk. Ehhez szükségünk van a betűtípus betöltésére, hogy bíztosra vegyük, minden számítógép azt fogja használni.

Sajnos különböző böngészők számára különböző típusú betűtípust kell használnunk, ezért nem elég egy hagyományos "ttf" kiterjesztésű betűtípus.

Betöltése a következő módon történik: A css fájl elejére kell írnunk az alábbi sorokat:

    @font-face
    {
        font-family: "Betűtípus neve";
        src: url('utvonal/betutipus_fajl.eot') format('eot');
        src: url('utvonal/betutipus_fajl.woff') format('woff');
        src: url('utvonal/betutipus_fajl.ttf') format('truetype');
        src: url('utvonal/betutipus_fajl.svg') format('svg');
        src: url('utvonal/betutipus_fajl.otf') format('otf');
        font-weight: normal;
        font-style: normal;
    }


        

A betűtípus neve lesz az, ahogy elnevezzük az új betűtípust, ezáltal ezt kell majd megadni a "font-family" tulajdonság értékeként.

Az src tulajdonság egy linket kell tartalmazzon, amely az adott betűtípus fájlhoz vezet, minden típus más és más böngészők számára szolgáltatja az útvonalat. A felsorolásból az adott böngésző kiválasztja a neki megfelelőt.

Régen kevésbé volt használatos, mert a böngészők nem támogatták eléggé, ezért más technikákhoz kellett folyamodni, de mára már működőképes.

Használata:

    label
    {
        font-family: "betűtípus neve";
    }