@font-face: embed fonts in jouw website (pro tips)

Creative Director

Typografie is één van de pijlers van een merkidentiteit. Het huisstijl lettertype bevind zich op hetzelfde niveau als het logo, beeldelementen en het kleurenpalet. De website is het belangrijkste raakpunt van jouw merkidentiteit met de doelgroep. Met de @font-face technologie kan eindelijk ook het lettertype op de website deel uitmaken jouw Brand Design.

Wat is CSS @font-face?

@font-face is een CSS-regel die custom lettertypes specificeert waarmee tekst op een website weergegeven kan worden zodat elke bezoeker deze hetzelfde ziet. Het lettertype kan geladen worden vanaf een externe server of als lokaal geïnstalleerd lettertype op de computer van de gebruiker.

Beperkingen tot nu toe

Verfijnde typografie is altijd het struikelblok voor web design geweest. Tot voor kort konden voor websites alleen web safe fonts of obscure technieken als sIFR en Cufón gebruikt worden.
Web safe fonts zijn fonts die standaard op de computer van de website bezoeker geïnstalleerd zijn (Verdana, Georgia, Times New Roman etc.) en daarmee in alle internet browsers hetzelfde weergegeven worden.

Nieuwe standaard voor het web

@font-face brengt een nieuwe webtechnologie-standaard die cross-platform, cross-browser, lichtgewicht en efficiënt is. Met andere woorden; het geeft web designers de mogelijkheid om OpenType en TrueType fonts op een server te installeren en die met CSS (Cascading Style Sheets) aan te roepen. Hiermee worden ze op elke computer, onder elk besturingssysteem en op elke internet browser hetzelfde weergegeven, onafhankelijk van het feit of deze fonts op de computer van de bezoeker geïnstalleerd zijn.

Fundamentele typografische eigenschappen

De web-technologie is een afspiegeling van de klassieke (offline) technieken. Dit is de lijst met online eigenschappen die de basis vormen voor goede web typografie. Met deze CSS properties kun je teksten van websites vormgeven (ook wel ‘stylen’ genoemd):

  • font-display
  • font-family
  • font-feature-settings
  • font-variation-settings
  • font-stretch
  • font-style
  • font-weight

Door deze eigenschappen slim en doeltreffend in te zetten kun je als vormgever de offline (print media) en online (website) huisstijl consistent maken.

Hoe herken ik @font-face?

Het gebruik van de @font-face codering is relatief eenvoudig. Wie enige kennis heeft van CSS style sheets zal met de implementatie in een website weinig problemen hebben. Je kunt deze ook gemakkelijk herkennen in de broncode van elke website.

Binnen een CSS style sheet definieert elke @font-face regel een font familie die gebruikt moet worden, de font software die geladen moet worden en het gewicht (bold, italic, etc.) van het lettertype. Een CSS stylesheet kan vele verschillende fonts bevatten, hoewel er maar enkele effectief gebruikt worden. Dit heeft geen nadelig effect op de performance van de website.
Hier een voorbeeld van een @font-face CSS code snippet:

@font-face syntax
@font-face live preview

Zo ziet de @font-face syntax er online uit.

Als gebruiker zie je wellicht niet meteen wat hier nu zo spectaculair aan is, maar feitelijk zie je hier online een custom lettertype, dat niet op jouw computer geïnstalleerd is. Dat toont het principe van @font-face. Stel je dus voor dat dit jouw eigen huisstijl lettertype is, op jouw eigen website.

Font formaten voor @font-face

De onderstaande font formaten kunnen gebruikt worden in combinatie met de @font-face technologie. Browser ondersteuning wordt met elke update beter. Dit is de stand der dingen op het moment dat dit blog gepubliceerd is.

Font formaatType browser
WOFF / WOFF 2: Web Open Font FormatZeer modern
EOT: Embedded Open TypeIE9 / IE8 / IE6
OTF: OpenType FontModern
TTF: TrueType FontSafari / iOS
SVG: Scalable Vector GraphicsLegacy / iOS

Browser ondersteuning voor @font-face

Deze veelgebruikte browsers zijn geschikt voor de @font-face techniek:

BrowserVanaf versieFont formaten
Safari (WebKit)3.4OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Opera10OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Microsoft Edge12Embedded OpenType (EOT)
Firefox3.5OpenType PS (.otf)
TrueType/OpenType TT(.ttf)
Web Open Font Format (WOFF / WOFF2)
Google Chrome3.0 betaOpenType PS (.otf)
TrueType/OpenType TT(.ttf)

Hieronder een gedetailleerde tabel van de Mozilla website die de browser ondersteuning toont voor de verschillende @font-face specificaties.

@font-face browser ondersteuning

Vervangen webfonts @font-face?

@font-face en webfonts zijn twee verschillende technieken. Ze kunnen probleemloos naast elkaar gebruikt worden.
Er zijn een paar slimme aanbieders die webfonts op een grotere schaal aanbieden. Bij deze aanbieders neem je een abonnement waarmee je dan de beschikbare fonts voor een maximaal aantal websites onbeperkt kunt gebruiken. Op die manier hoef je niet elk font te kopen en op je server te installeren, je huurt het feitelijk van ze en laad ze van hun server.
De bandbreedte belasting (ofwel ‘page load’) ligt bij deze online aanbieders, waardoor de belasting op je eigen website laag blijft.

Hoe zit het met de rechten?

Het probleem dat font foundries momenteel nog met @font-face hebben is dat het de (raw) font software (WOFF, EOT, TTF, etc) blootstelt zodat iedereen die kan downloaden (ofwel stelen).
Met ‘raw’ is het basis bestand bedoeld dat je direct op je computer kunt installeren en gebruiken. Het downloaden van een font is daarmee net zo gemakkelijk geworden als het downloaden van een afbeelding. Momenteel is er nog niet voldoende auteursrechtelijke bescherming voor de manier waarop @font-face werkt. Er zijn momenteel nog maar twee opties voor de font foundries;

  1. Ze moeten de designer vertrouwen dat die voor hun fonts betaald, ook als die openlijk toegankelijk zijn, of
  2. ze moeten wachten totdat er een wet komt die hun fonts beschermt.

Alternatieve web fonts embedding technieken

De @font-face techniek is niet de enige ontwikkeling op het gebied van webfonts embedding die in de race is de nieuwe web-standaard te worden. Momenteel lopen er nog drie ontwikkelingen parallel aan de @font-face ontwikkeling die interessant genoeg zijn om hier kort te bespreken:

EOT (Embedded OpenType Format)

In 1997 ontwikkelde Microsoft EOT, een compacte versie van OpenType die embedding in Internet Explorer toeliet. In 2007 gaven ze deze techniek vrij, boden het aan aan W3C (zodat het in CSS3 opgenomen zou kunnen worden) en hoopten op een wereldwijde acceptatie. Later dat jaar werd het voorstel afgewezen uit veiligheidsoverweging. In 2008 werd EOT opnieuw aan W3C aangeboden.
– Update: Ondertussen is EOT officieel aangenomen en de standaard in Microsoft browsers.

.webfont

Onlangs hebben twee getalenteerde font designers (én programmeurs), Tal Leming en Erik van Blokland, een alternatief voorgesteld; het .webfont formaat. Dit formaat is niet publiek vrijgegeven en is ook geen open source. De makers houden de copyright controle over het formaat en kunnen beslissen wat de gebruiker wel en niet mag doen. Of het formaat officieel vrijgegeven zal worden zal de toekomst uit moeten wijzen. .webfont (dotwebfont) is een gecomprimeerd bestand (waarschijnlijk .zip) dat twee files bevat; de feitelijke font data, en een ‘info.xml’ file. De ingesloten rechten of meta data worden door ondersteunende browsers gelezen, waarmee bepaald wordt of het font gedownload en weergegeven mag worden.

Permissions Table for OpenType

PERM is een voorstel van David Berlow van The Font Bureau. Om een lang verhaal kort te maken; dit voorstel plaatst meta data in de OpenType font file. Dit is informatie over de rechten waarmee het font gelicenceerd is en op welke website het weergegeven mag worden. Het grote voordeel van PERM is tegelijkertijd ook het nadeel; de xml structuur waarin de rechten beschreven staan. Hoe kan voorkomen worden dat misbruikers de font files openen en de rechten bewerken?

Wie beslist hierover?

Wanneer wordt een nieuwe web-standaard geaccepteerd en wie beslist daarover? In tegenstelling tot wat velen denken beslist niet W3C of een nieuwe web-standaard aangenomen wordt, maar de community; de font foundries, de font ontwerpers en de distributeurs, ofwel de mensen die ermee moeten werken. Als zij de nieuwe ontwikkelingen ondersteunen én de makers van internet browser (FirefoxSafariInternet ExplorerOperaGoogle Chrome, etc.) ondersteuning inbouwen, eerst dan zal W3C serieus overwegen het web-standaard in het nieuwe CSS protocol op te nemen.

Ondersteuning nodig bij jouw @font-face toepassing?

Als je nog vragen hebt over de technische toepassing van @font-face lettertype toepassingen in jouw website, neem dan gerust contact met ons op.

Help me met @font-face