CSS @font-face

@font-face is de CSS at-rule die de browser vertelt waar een fontbestand te vinden is en hoe het te noemen. Het werd voor het eerst ondersteund in IE 4 in 1997, maar werd pas praktisch bruikbaar in alle browsers rond 2010 toen WOFF arriveerde en andere browsers de regel consistent implementeerden.

Voor icoonfonts is @font-face de verbinding tussen uw fontbestanden en de CSS-klassen die iconen weergeven. Zonder het heeft de browser geen manier om te weten dat font-family: 'MyIcons' een specifiek bestand van uw server moet laden.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

De descriptor font-family geeft het font een naam waarnaar u later zult verwijzen. De descriptor src vertelt de browser waar het bestand te downloaden en in welk formaat het is. De descriptors font-weight en font-style zorgen ervoor dat de browser niet probeert vette of cursieve varianten te synthetiseren. En font-display bepaalt wat er gebeurt terwijl het font laadt.

De hint format() na elke URL vertelt de browser in welk formaat het bestand is, zodat het formaten die het niet ondersteunt kan overslaan zonder ze eerst te downloaden. In de loop der jaren is de aanbevolen set formaten drastisch afgenomen naarmate de browserondersteuning verbeterde.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Met 97%+ browserafdekking is alleen WOFF2 voldoende voor de overgrote meerderheid van moderne projecten. Dit is de eenvoudigste en meest performante aanpak.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

WOFF toevoegen als fallback dekt IE 11, dat WOFF2 niet ondersteunt. Moderne browsers laden het WOFF2-bestand; IE 11 valt terug op WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

De volledige "bulletproof" stack bevat EOT voor IE 6-8, WOFF2 voor moderne browsers, WOFF voor IE 9-11 en TTF als uiteindelijke fallback. De browser probeert elke src-vermelding op volgorde en gebruikt het eerste formaat dat het begrijpt. Deze aanpak is alleen nodig voor projecten met extreme legacy-vereisten.

Het standaardpatroon voor icoonfonts gebruikt een basisklasse die de fontfamilie en gedeelde renderingstijlen instelt, gevolgd door individuele icoonklassen die ::before-pseudo-elementen gebruiken met content ingesteld op het Unicode-codepunt van elk icoon.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

De basisklasse reset de fontstijl om te voorkomen dat de browser vet, cursief of andere transformaties toepast die de iconen zouden vervormen. De eigenschappen -webkit-font-smoothing en -moz-osx-font-smoothing schakelen antialiasing in voor scherpere rendering op macOS en iOS.

Elke icoonklasse stelt een ::before-pseudo-element in met het Unicode-codepunt dat aan die glyph is toegewezen. De backslash-E-notatie (\E001) is de manier van CSS om naar een Unicode-teken te verwijzen via zijn hexadecimale codepunt.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Zowel <i> als <span> werken even goed. Het element zelf is leeg — het icoon wordt volledig weergegeven door het pseudo-element ::before.

De descriptor font-display bepaalt wat de browser toont terwijl het fontbestand nog wordt gedownload. Dit is cruciaal voor icoonfonts omdat de verkeerde instelling iconen onzichtbaar kan maken tijdens het laden van de pagina.

Voor icoonfonts is swap de aanbevolen keuze. Een korte flits van ongeopmaakte inhoud (waarbij icooncodepunten als vierkanten of lege ruimten kunnen verschijnen) is veel beter dan onzichtbare iconen. Met block kunnen gebruikers op trage verbindingen tot 3 seconden lege ruimte zien waar iconen zouden moeten zijn — wat eruitziet als een kapotte pagina. Met swap verschijnen de iconen zodra het font is geladen, en de overgang is doorgaans onmerkbaar op moderne verbindingen.

Fontbestanden blokkeren standaard de rendering — de browser zal geen tekst weergeven met een aangepast font totdat het bestand is gedownload. Hier zijn technieken om de impact te minimaliseren:

• Laad het fontbestand voor — gebruik <link rel="preload"> om de download zo vroeg mogelijk te starten, voordat de browser zelfs de CSS heeft geparseerd die ernaar verwijst.
• Host uw fonts zelf — fontbestanden van dezelfde oorsprong als uw HTML serveren vermijdt extra DNS-lookups en verbindingsopbouw, en elimineert CORS-problemen.
• Maak een subset van uw font — verwijder ongebruikte iconen om de bestandsgrootte te verkleinen. Een font met 500 iconen waarvan u er maar 50 gebruikt, verspilt 90% van de download.
• Gebruik unicode-range — als u meerdere icoonsets heeft, vertelt deze descriptor de browser het fontbestand alleen te downloaden wanneer tekens in het opgegeven bereik daadwerkelijk op de pagina worden gebruikt.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

Het attribuut crossorigin is vereist, zelfs voor fonts van dezelfde oorsprong — dit is een eigenaardigheid van de fontlaadspecificatie. Zonder het zal de browser het font twee keer downloaden: eenmaal vanuit de preload-hint (zonder CORS) en eenmaal vanuit de @font-face-regel (met CORS).

• CORS-fouten — Fontbestanden die worden geleverd vanuit een andere oorsprong (bijv. een CDN-subdomein) hebben Access-Control-Allow-Origin-headers op de server nodig. Gebruik anders het attribuut crossorigin op de <link>-tag. Zonder juiste CORS-configuratie blokkeert de browser het font stilzwijgend.
• Iconen die als vierkanten of rechthoeken verschijnen — Dit betekent gewoonlijk dat het pad naar het fontbestand verkeerd is, het font nog niet geladen is, of de naam font-family in de icoonklasse niet overeenkomt met de naam in de @font-face-declaratie. Controleer het tabblad Netwerk van uw browser om te bevestigen dat het fontbestand is geladen met status 200.
• Iconen die verkeerde glyphs tonen — Unicode-codepuntconflicten met systeemfonts. Als uw icoonfont codepunten gebruikt in bereiken die overlappen met veelgebruikte systeemfonts, kan de browser een systeemteken renderen in plaats van het icoon. Icoonfonts gebruiken doorgaans het Privégebruiksgebied (U+E000 tot U+F8FF) om dit te vermijden.