|
|
|
Tutorial pages:« 1 » |
|
wmikke
|
| Custom lettertype - Posted on: 17-02-2010 at 20:24 | |
 
|
Normaal gesproken kun je maar een beperkt aantal lettertype's gebruiken op een webpagina, omdat deze lettertype's op de computer van de bezoeker zijn geïnstalleerd.
Afhankelijk van de browser (en versie) is het mogelijk om lettertype's te "embedden"en is het mogelijk om ieder lettertype te gebruiken op een website.
Het embedden van een lettertype gebeurt met CSS.
Om een custom lettertype te gebruiken heb je twee bestanden nodig, een TTF bestand (TrueType Fonts) en een EOT bestand (Embedded OpenType). Een TTF bestand kun je omzetten via een site zoals deze (klik).
Maar wat is nu precies het verschil tussen een TTF bestand en een EOT bestand?
TrueType Font (TTF)
TrueType is een standaard voor lettertypen. Bij een TrueType lettertype kan in bijvoorbeeld een tekstverwerker enkel gekozen worden voor normaal, cursief of vetgedrukt.
Embedded OpenType (EOT)
Embedden OpenType lettertype's zijn ontwikkeld door Microsoft en Adobe om meer mogelijkheden te bieden.
Met de Web Embedding Fonts Tool (WEFT) van Microsoft is het mogelijk om TrueType lettertype's om te zetten naar het Embedded OpenType formaat.
Maar hoe gebruik ik deze bestanden nu eigenlijk op mijn website?!
Nadat je de bestanden hebt omgezet kun je ze met de volgende CSS code's embedden in je website, niet heel moeilijk.
Voor Internet Explorer gebruik je het EOT bestand, en de volgende code:
1
2
3
4
5
6
|
|
/* Internet Explorer */
@font-face {
font-family:MijnLettertype;
src:url(MijnLetterType.eot')
}
|
|
|
Pas in de bovenstaande (en onderstaande) code het woord MijnLettertype aan naar de naam van jou lettertype, en pas ook het bestand aan (Bijv.: MijnLetterType.eot).
Voor Firefox het zelfde verhaal, alleen dan met het TTF bestand.
1
2
3
4
5
6
|
|
/* Firefox */
@font-face {
font-family:MijnLetterType;
src:url('MijnLetterType.ttf') format("truetype")
}
|
|
|
Om het lettertype vervolgens op je pagina's te gebruiken kun je het lettertype aanroepen netzoals dit met alle standaard lettertype's gebeurt.
Bijvoorbeeld:
1
2
3
4
5
6
|
|
h1 {
font-family: MijnLettertype;
font-size: 20pt;
color: #B02B2C;
}
|
|
|
Succes! 
|
|
|
|
|
