@font-face is een CSS-regel waarmee lettertypes kunnen worden weergegeven in webpagina's op internet. Voordat deze regel er was, konden webmasters een beperkte set lettertypen gebruiken op hun sites, die het meest gebruikt werden en geïnstalleerd waren op de computers van gebruikers. Met de komst van @font-face kan elk specifiek lettertype eenvoudig aan een website worden gekoppeld.
Als je het lettertype op onze site hebt gedownload, vind je in het archief met lettertypes kant-en-klare CSS-code die moet worden gekopieerd en in het CSS-document bij het project moet worden gezet.
Stap voor stap installeren
1. Selecteer het gewenste lettertype en klik op "downloaden voor website".
2. Maak in de root van je site een map fonts aan en kopieer de gedownloade fonts.
Open je CSS-document en kopieer de inhoud van het tekstbestand uit het archief erin.
4. Zorg ervoor dat het pad naar de map met lettertypes correct is gespeld. Afhankelijk van de positie van de map waar de lettertypes staan, kan het pad één of meer punten bevatten.
5. Gereed. Kopieer de eigenschap met de familienaam en plak deze in de selector waarvoor je de stijlen schrijft.
Wat als ik het lettertype al ergens anders heb gedownload en ik het wil aansluiten?
In dit geval moet je een font converter vinden op het internet en je ttf font (of otf) converteren naar de juiste formaten, namelijk eot, svg, woff en woff2. Dit is om ervoor te zorgen dat het lettertype correct wordt weergegeven en werkt in alle browsers en op mobiele apparaten.
Je moet dan zelf de @font-face regel spellen, met respect voor de syntaxis.
De syntaxis voor @font-face
De syntaxis van de regel kan grofweg worden verdeeld in basiseigenschappen en geavanceerde eigenschappen.
Basis:
- font-family - specificeert de naam van het lettertype.
- src - geeft het pad van het lettertype aan. Dit kan de URL zijn van het lettertype op de server van je website, URL's van lettertypes op de server van iemand anders (zoals Google Fonts), of gewoon de naam van het lettertype op de computer van de gebruiker (Helvetica New Bold, Tahoma, Georgia, enz.).
Uitgebreid:
- font-display - bepaalt hoe het lettertype wordt weergegeven, afhankelijk van of het is gedownload en klaar is voor gebruik.
- font-stretch - kun je de breedte van de tekst aanpassen.
- font-style - bepaalt of het lettertype gewoon, cursief of schuin is (de laatste twee zijn niet hetzelfde).
- font-weight - Stelt de verzadiging van het lettertype in, op een schaal van 100 tot 900 (100-klein, 900-klein).
- font-variant - bepaal hoe de kleine letters moeten worden gepresenteerd - laat ze ongewijzigd of maak ze allemaal kleine letters (hoofdletters).
- font-feature-settings - Hiermee kun je geavanceerde typografische functies in OpenType-lettertypen beheren.
- font-variations-settings - maakt controle op laag niveau mogelijk over variaties van Open Type en TrueType lettertypes door asnamen van vier letters op te geven.
- unicode-range - specificeert de reeks Unicode-codes (glyphs) die in het lettertype moeten worden gebruikt.
Een lettertype aan je site koppelen met Google Fonts
Google Fonts gebruiken is de eenvoudigste manier om een lettertype aan je website te koppelen. Ga naar hun website, zoek het lettertype dat je wilt, kies het juiste lettertype om te installeren en kopieer de code.
De gekopieerde code moet in de body van de head tag op je html-pagina worden geplaatst.
Nadeel van deze methode is dat als je tijdens het opmaken van de site geen internet hebt - de lettertypen niet worden weergegeven en worden vervangen door standaard lettertypen omdat de bestanden zich niet op de lokale computer bevinden, maar op de servers van Google. Ook is de kans groot dat wanneer je bij de klant komt voor een presentatie van de lay-out (of gewoon voor een bevestiging) en hij geen Wi-Fi heeft, het probleem zich opnieuw voordoet.
