CSS - Alle lettertypen gebruiken


Als je op een website graag een speciaal lettertype wilt gebruiken voor koppen dan was het eerder zo dat dit toegepast kon worden met behulp van bijvoorbeeld Cufon. Normaal gesproken zijn er maar een beperkt aantal lettertypes te gebruiken op een website zoals Arial, Times New Roman, Tahoma, Trebuchet, Georgia en Verdana. Met behulp van Cufon kan dan bijna elk gewenst lettertype worden gebruikt op een site, dit werkt in alle moderne browsers maar een vereiste is wel dat bezoekers Javascript hebben ingeschakeld.

CSS Fonts

Maar Cufon is wellicht niet altijd even handig en daarom is er een betere een makkelijkere manier om andere lettertypen te gebruiken, gewoon met CSS. Met de komst van CSS Font Face en de benodigde ondersteuning door de bekende browsers kun je dit dus oplossen met behulp van CSS, daarmee wordt het toepassen een stuk simpeler dan met Cufon.

Om een afwijkend lettertype te gebruiken op een website heb je twee bestanden nodig die aangeroepen moeten worden, het gaat om een TTF bestand (TrueType) voor Google Chrome, Firefox en anderen, daarnaast een EOT bestand die is voor Internet Explorer.

TrueType is een standaard voor lettertypen. Bij TrueType-lettertypen kan in een tekstverwerker alleen gekozen worden tussen "normaal", "cursief" en "dikgedrukt". Het is niet mogelijk om het "gewicht" in te stellen (hoe dik of dun de letters zijn), ook kan de breedte (spacing) tussen de letters niet aangepast worden. TrueType-lettertypen worden opgevolgd door de OpenType-standaard (OTF) bedacht door Microsoft en Adobe waarbij er wel meer mogelijkheden zijn. Eventueel kun je OTF bestanden proberen te hernoemen naar TTF bestanden en zodoende dan het TTF bestand gebruiken op je website.

Naast een TTF bestand heb je dus nog een EOT bestand (Embedded OpenType) nodig speciaal voor browser Internet Explorer. Je kunt een TTF bestand eenvoudig via een online tool converteren naar een EOT bestand. Voorbeeld van goede tools vind je hier en hier.

Toepassen

Hieronder een kop voorzien van een speciaal lettertype, in dit geval het lettertype Bleeding Cowboys Regular. Je kunt zoals je ziet de tekst met de muis gewoon selecteren.

Lorem Ipsum Dolor WebSonic

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 Google Chrome en eronder stel je het lettertype in specifiek voor browser Internet Explorer.

Achter Font-family geef een eigen naam op. Vervolgens is in dit geval een H1 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');
}

/* Andere browsers */
@font-face {
        font-family:Cowboys;
        src:url('downloads/bleeding_cowboys_regular.ttf') format("truetype");
}

h1 {
        font-family:Cowboys;
        font-size:30px;
        color:#000;
}