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

Inhoudsopgave van dit blog

• Wat is CSS @font-face?
• Hoe herken ik @font-face?
• Nieuwe standaard voor typografie op het web
• Fundamentele typografische eigenschappen
• Font formaten voor @font-face
• Browser ondersteuning voor @font-face
• Vervangen webfonts @font-face?
• Hoe zit het met de rechten?
• Alternatieve web fonts embedding technieken
• Wie beslist over @font-face?

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.

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:

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.

Nieuwe standaard voor typografie op 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 (webdesign) merkidentiteit consistent maken.

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 formaat	Type browser
WOFF / WOFF 2: Web Open Font Format	Zeer modern
EOT: Embedded Open Type	IE9 / IE8 / IE6
OTF: OpenType Font	Modern
TTF: TrueType Font	Safari / iOS
SVG: Scalable Vector Graphics	Legacy / iOS

Browser ondersteuning voor @font-face

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

Browser	Vanaf versie	Font formaten
Safari (WebKit)	3.4	OpenType PS (.otf) TrueType/OpenType TT(.ttf)
Opera	10	OpenType PS (.otf) TrueType/OpenType TT(.ttf)
Microsoft Edge	12	Embedded OpenType (EOT)
Firefox	3.5	OpenType PS (.otf) TrueType/OpenType TT(.ttf) Web Open Font Format (WOFF / WOFF2)
Google Chrome	3.0 beta	OpenType 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.

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)

Embedded OpenType (EOT) is in 1997 door Microsoft ontworpen. Het is een compacte versie van OpenType (OTF) voor embedding Internet Explorer.
De bestanden worden zeer klein gemaakt door compressie en subsetting. Subsetting biedt enige auteursrechtelijke bescherming wanneer ze online worden gepubliceerd, maar EOT gebruikt ook codering voor verdere bescherming.

Nadat Microsoft de techniek in 2007 vrijgegevens heeft, hebben ze EOT in 2008 opnieuw ter acceptatie aangeboden. 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 gelicenseerd 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 over @font-face?

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 (Firefox, Safari, Internet Explorer, Opera, Google Chrome, etc.) ondersteuning inbouwen, eerst dan zal W3C serieus overwegen het web-standaard in het nieuwe CSS protocol op te nemen.