Ik ben een groot fan van @font-face. Het is een mooie manier om andere fonts op het web te kunnen gebruiken. Ik ben niet de enige die het steeds vaker gebruikt. Steeds meer ontwikkelaars zien de voordelen en passen het steeds vaker toe in plaats van oplossingen als Cufón of Typeface. Helaas passen veel ontwikkelaars het niet goed toe en wordt de website vaak niet goed getest in oudere browsers.
Mijn favoriete browser is Google Chrome en deze gebruik ik daarom ook het meest. Ik heb daarnaast echter ook nog een oudere versie van Mozilla Firefox op mijn computer die ik af en toe nog gebruik. Deze versie ondersteund geen @font-face. Als ik met deze browser een website bezoek die @font-face gebruikt zal ik het desbetreffende font dus niet zien. In plaats van de @font-face declaratie zullen de teksten in een ander font getoond worden. In onderstaand voorbeeld zullen de browsers die @font-face ondersteunen de teksten in League Gothic tonen. In mijn geval worden de teksten in Arial getoond.
h1 {
font-family: LeagueGothic, Arial, Verdana, sans-serif;
font-size: 30px;
}
Het probleem
League Gothic en Arial zijn twee totaal verschillende fonts. Fonts met een verschillende x-height, weight, lettergrootte en letter-spacing. Met name het verschil in letter-spacing en lettergrootte veroorzaakt problemen. League Gothic heeft erg weinig letter-spacing en de letters zijn in verhouding met Arial relatief klein. Dat bekent dat een zin in League Gothic veel minder ruimte in zal nemen dan een zin in Arial. Oftewel als een design gebaseerd is op League Gothic en de teksten op de website gepresenteerd worden in Arial dan zal het design uit elkaar getrokken worden. In het ergste geval vallen teksten buiten beeld of overlappen de teksten andere elementen. In onderstaand voorbeeld zie je duidelijk het verschil tussen League Gothic en Arial. Beide hebben een font-size van 30 pixels.
De oplossing
Gelukkig is dit probleem eenvoudig op te lossen. De meest eenvoudige oplossing is om twee fonts te kiezen die qua lettergrootte en letter-spacing erg dicht bij elkaar liggen. In dat geval zou je dus geen League Gothic kunnen gebruiken. Wil je wel graag een dergelijk font gebruiken, dan komt Modernizr om de hoek kijken. Als je een beetje op de hoogte blijft van de laatste webontwikkelingen heb je er vast wel eens van gehoord en wellicht al toegepast.
Modernizr is een open source javascript library die het mogelijk maakt om nieuwe technieken te gebruiken. Met behulp van Modernizr kunnen ontwikkelaars volop HTML5 en CSS 3 toepassen zonder dat dat nadelen heeft voor bezoekers met bijvoorbeeld een verouderde browser.
Modernizr detecteert op een slimme manier welke CSS technieken een browser ondersteund. Vervolgens kan de ontwikkelaar zelf bepalen wat er moet gebeuren als een techniek niet door de browser ondersteund wordt. Hiermee kunnen we het probleem van @font-face ook oplossen. Modernizr maakt namelijk de body class .no-fontface aan. We hoeven nu alleen nog de font-size naar beneden te halen als de browser @font-face niet ondersteund. Dat doen we als volgt:
.no-fontface h1 {
font-size: 20px;
}
Voilá het probleem is opgelost. Het verbaasde me dat er zo weinig ontwikkelaars rekening mee houden. Het mag immers niet zo zijn dat het toepassen van @font-face zal leiden tot een slechtere gebruikerservaring. Bezoekers met een ietwat oudere browser moeten de website ook goed kunnen bekijken. Daarom zou ik zeggen: Gebruik @font-face goed of gebruik het niet.