Web fonts met @font-face verbeterd in CSS3

Posted by on feb 18, 2011 in CSS Tips | 1 comment

Dit is geen nieuwe functie van CSS , want het is al mogelijk sinds Internet Explorer 5 om met @font-face andere lettertypen te implementeren dan de standaard fonts die iedereen op zijn computer heeft staan.

De vernieuwing is dat er tegenwoordig ook true type fonts ( .ttf ) en OpenType fonts ( .otf ) gebruikt kunnen worden. In het verleden was deze functie alleen te gebruiken met embedded open type ( .eot ) fonts.  Het embedded open type is eigenlijk nooit echt in gebruik genomen, daardoor was deze functie ook nooit een succes.

Om @font-face te gebruiken, begin je CSS document met:

@font-face {
font-family: Pristina;
src: url(‘locatie_van_het_font/Pristina.ttf’);
}

vervolgens kun je dit lettertype gewoon als volgt gebruiken:

h1{

font-family: Pristina;

}

Hou er rekening mee dat dit in Firefox, Safari en Opera prima werkt. In internet explorer werkt het natuurlijk alleen nog met het embedded open type font.



One Responseto “Web fonts met @font-face verbeterd in CSS3”

  1. Kenneth zegt:
    18 februari 2011 om 19:21

    Bedankt Manieu!

    Hier zit ik al jaren op te wachten!
    Ik ga er meteen gebruik van maken natuurlijk =)

    Beantwoorden

Leave a Reply