De meeste websites maken gebruik van de zogenaamde web veilige fonts, fonts zoals Arial, Helvetica, Verdana, sans-serif. Deze fonts zijn op iedere computer aanwezig en op die manier veilig om te gebruiken.

Tegenwoordig is het ook mogelijk om gebruik te maken andere fonts. Fonts die je zelf hebt gemaakt of die je van het internet hebt gehaald. Op  Fontsquirrel staan veel gratis fonts.

Hoe gebruik je deze fonts nou? Dit gaat heel eenvoudig met behulp van @font-face in CSS.

Kijk maar naar het voorbeeld:

Code blok

@font-face {
font-family:ColabReg;
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Met font-family geef je aan hoe je font heet. Met url geef je aan waar je, je font hebt staan.
Met format geeft je aan om wat voor type bestand het gaat.
Met local geef je aan dat er eerst gekeken moet worden of de font al op de computer staat voordat deze gedownload moet worden.

Wil je die font dan voor een stuk tekst gebruiken, dan doe je dit net zoals je iedere andere font gebruikt:

Code blok

@font-face {
p{
font-family: "ColabReg", sans-serif;
}

Fonts bestanden die je kan gebruiken zijn OpenType Fonts(otf) en TrueType Fonts (ttf). Deze worden ondersteunt door alle moderne browsers behalve Internet Explorer.

Voor Internet Explorer heb je fonts in het Embeded OpenType (eot) formaat nodig. Fonts kun je bij onlinefontconverter omzetten naar het eot formaat.

Deze zet je er dan als volgt tussen:

Code blok

@font-face {
font-family:ColabReg;
src: url(ColabReg.eot); /* Speciaal voor IE */
src: local("ColabReg.otf") url(fonts/ColabReg.otf) format("opentype");
}

Let op dat de volgorde voor ie belangrijk is. De font voor IE moet bovenaan staan.

Fontface word ondersteunt door: Firefox 3.1+, Safari 3.1+, Opera 10 en IE4+