CSS - Alle lettertypen gebruiken
Als je op je website gebruik wilt maken van een speciaal lettertype voor bijvoorbeeld een kopje dan ging dit voorheen met behulp van sIFR. Normaal gesproken kun je maar een beperkt aantal lettertypes gebruiken op je website zoals Arial, Times New Roman en Verdana. Met behulp van sIFR, een combinatie van Javascript en Flash is het mogelijk om elk gewenst lettertype te gebruiken zonder dat het vereist is dat de bezoeker dit lettertype heeft geinstalleerd. Wel is het vereist dat Flash aanwezig is.
Maar sIFR is niet altijd even handig in het gebruik en daarom is er een betere manier om speciale lettertypen te gebruiken, gewoon met CSS. Met de komst van CSS Font Face en de benodigde ondersteuning door de moderne browsers kun je dit dus oplossen met behulp van CSS, daarmee wordt het gebruik een stuk simpeler dan met Sifr.
Om een afwijkend lettertype te gebruiken heb je twee bestanden nodig, een TTF bestand (TrueType) voor Firefox en een EOT bestand speciaal voor Internet Explorer.
TrueType is een standaard voor lettertypen. Bij TrueType-lettertypen kan in een tekstverwerker alleen gekozen worden tussen "normaal", "cursief", "dikgedrukt". Het is niet mogelijk om het "gewicht" in te stellen (hoe dik of dun de letters zijn), ook is de breedte tussen de letters niet aan te passen. TrueType-lettertypen worden opgevolgd door de OpenType-standaard (OTF) ontwikkeld door Microsoft en Adobe waarbij er meer mogelijkheden zijn. Eventueel kun je OTF bestanden proberen te hernoemen naar TTF bestanden en zodoende het TTF bestand gebruiken op je website.
Naast het TTF bestand heb je dus nog een EOT bestand (Embedded OpenType) nodig voor Internet Explorer. Je kunt het TTF bestand eenvoudig via een online tool omzetten naar een EOT bestand. Een voorbeeld van een dergelijke tool hier.
Hieronder een kop voorzien van een speciaal lettertype, Bleeding Cowboys Regular. Je kunt zoals je ziet de tekst met de muis selecteren.
WebSonic.nl / www.websonic.nl
Het toepassen van een speciaal font gaat met de onderstaande code met de CSS-declaratie @font-face. In het eerste gedeelte stel je het lettertype in voor onder andere Firefox en eronder stel je het lettertype in specifiek voor Internet Explorer.
Achter Font-family geef een eigen naam op. Vervolgens is in dit geval een H6 gedefinieerd waar je dan weer de net ingevoerde naam invult met daarnaast de gebruikelijke opmaak.
/* Internet Explorer */
@font-face {
font-family:Cowboys;
src:url('downloads/bleeding_cowboys_regular.eot')
}
/* Firefox */
@font-face {
font-family:Cowboys;
src:url('downloads/bleeding_cowboys_regular.ttf') format("truetype")
}
h6 {
font-family:Cowboys;
font-size:30px;
}
