Niet-standaard fonts gebruiken II
In het item Niet-standaard fonts gebruiken wordt uiteen gezet hoe je lettertypen die niet beschikbaar zijn in de computer van de gebruiker, toch kunt gebruiken in je website. Die aanpak is in de loop der jaren gestroomlijnd en vereenvoudigd. De huidige status wordt hier beschreven.
Om dit verhaal goed te volgen neem je het beste eerst kennis van de inhoud van Niet-standaard fonts gebruiken.
Oorspronkelijk had je, om het in elke browser goed te laten werken, voor één lettertype tot vier font-bestanden nodig. Elk van die bestanden had eigen bestandsextensie: ttf met varianten eot en otf, woff met variant woff2 en svg met variant svgz. Al die bestanden bevatten dezelfde informatie. Dat is niet erg efficiënt.
Inmiddels zijn ttf en svg met hun varianten uit de standaarden verdwenen en worden ze door moderne browsers
alleen nog ondersteund vanwege de achterwaartse compatibiliteit.
Alleen woff en woff2 (een beter gecomprimeerde versie van woff) staan nog in de standaarden.
In een website hoef je alleen nog woff of woff2 te gebruiken.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code zou er als volgt uit kunnen zien:
(Zet dit in de <HEAD> of gebruik een gelinkt style sheet).
(Voorbeeld van een verwijzing vanuit de tekst in de <BODY>).<style>
/* Voor het toepassen van FontinRegular op een pagina: */
@font-face {
font-family: 'FontinRegular';
src: url('fonts/fontin-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Voor het eenvoudig gebruiken van FontinRegular: */
.style1 {font: 12pt/14pt 'FontinRegular',"Courier New",serif; }
</style>
<p class="style1">Lorem ipsum dolor sit amet, consectetaur adipisicing elit … </p>
