Geen sifr, geen cufon maar Font-face!
De laatste bijdrage van onze (nu ex-)stagiaire Rick Leyten: Na de fijne ervaring met sifr *ahum* besloot ik om te gaan zoeken naar een vervanging en die vond ik!
De makers van font-face maken het zo makkelijk dat echt het geen flash nodig heeft om te functioneren. Sterker nog iedereen met een geupdate browser (op Opera na.. dit komt binnenkort) ziet deze fonts.
Het enige wat je moet doen is in je css-stylesheet het volgende definiëren:
/* Font face */
@font-face {
font-family: GraublauWeb;
font-weight: bold; /* Optioneel */
src: url("jouw-internet-adres/GraublauWebBold.otf") format("opentype");
}
In de src plaats je waar de font zich bevindt, vervolgens definieer je in een html-tag waar deze font zich moet laten zien:
h2 {
font-family: GraublauWeb;
font-size: 18px;
}
En violá! Kind kan de was doen..
Bron:
- Font-face
- css3.info Web fonts with @font-face http://www.css3.info/preview/web-fonts-with-font-face/
- A list apart CSS @ Ten: The Next Big Thing
Helaas gooit ook hier Internet Explorer roet in het eten. Om @font-face te gebruiken in IE moet je eot font bestanden genereren.
Fontspring heeft een duidelijk artikel geschreven met een @font-face syntax die werkt met alle browsers: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Hoi Johann,
Bedankt voor je reactie.
Ja je hebt gelijk, IE, zucht.
Ik heb ook nog een andere post gevonden, waar veel info hierover staat:
http://sixrevisions.com/css/font-face-guide/