Het gebruik van webfonts in e-mail

Geschreven door Daniel Taylor op 22 december 2021

Webfonts zijn alternatieve lettertypen die je merkidentiteit versterken. Steeds meer mailboxproviders ondersteunen het gebruik van webfonts, waardoor je ook e-mails van webfonts kunt voorzien.

In dit artikel bespreken we hoe je webfonts gebruikt als onderdeel van je e-mailmarketing.

E-mailondersteuning

Mailboxproviders zoals Apple Mail, Android Mail en Thunderbird ondersteunen het gebruik van webfonts, terwijl providers als Gmail en Yahoo nog geen ondersteuning bieden. Voor die tweede groep geldt dat het webfont alsnog wordt omgezet naar een standaardlettertype.

Bij het toepassen van webfonts is het dus belangrijk om rekening te houden met de e-mailclient van de ontvanger. Bevat je verzendlijst voornamelijk Gmail-adressen? Dan is het gebruik van webfonts minder interessant.

Hoe gebruik ik webfonts in e-mail?

Webfonts worden opgevraagd via een server. Om webfonts te gebruiken heb je dus de URL van het fontbestand nodig. De URL van een Google-font is bijvoorbeeld hier te vinden.

Er zijn drie manieren om de URL van een webfontbestand te verwerken in een e-mail: (1) door middel van een import, (2) via een link of (3) door gebruik te maken van een fontface.

Methode 1: import

Bij de importmethode wordt het opgegeven webfont gezamenlijk met de rest van de HTML-code gedownload. Daardoor kan het zijn dat het lettertype iets later wordt getoond dan de rest van de e-mail.

Je past de importmethode toe door middel van de onderstaande<style>-code. Deze plaats je in de <head> van de HTML-code van je e-mail:

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

Methode 2: link

Omdat de import-methode kan leiden tot een vertraagde tekstweergave biedt de link-methode een mogelijk alternatief.

De link-methode is met name geschikt voor lettertypebestanden waarvan de bestandsgrootte beperkt is. Wanneer je grote lettertypebestanden op deze manier opvraagt kan het namelijk zijn dat de gehele e-mail langzamer wordt ingeladen.

Je past de link-methode toe door middel van de onderstaande <link>-code. Deze plaats je in de <head> van de HTML-code van je e-mail:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

Methode 3: font-face

De derde methode is de font-face-methode. Hiermee selecteer je het formaat van het font-bestand dat je wilt opgeven. De fontface-methode heeft daarmee een voordeel ten opzichte van andere methoden waarbij je het bestandsformaat niet zelf kunt opgeven.

De meestgebruikte formaten zijn .woff, .svg, .woff2, .eot en .ttf. .woff en .woff2-bestanden worden het breedst ondersteund.

Je past de font-face-methode toe door middel van de onderstaande <font-face>-code. Deze plaats je in de <style>-tags van je e-mail:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Een fallback-font instellen

Het instellen van een fallback-font voorkomt dat e-mailtekst foutief wordt weergegeven, bijvoorbeeld wanneer de ontvangende mailboxprovider het webfont niet ondersteunt of het font niet goed matcht met het gekozen ontwerp. Idealiter is je fallback-font vergelijkbaar met het webfont en is deze afkomstig uit dezelfde font-familie (bijvoorbeeld Sans-serif).

Je stelt een fallback-font in door middel van de onderstaande <style>-code. Deze plaats je in de <head> van de HTML-code van je e-mail:

<style type=”text/css”> h1 { font-family: Arial, sans-serif; } </style>

Fallback-fonts zoals Arial, Times New Roman, Verdana, Helvetica en Georgia worden door de meeste mailboxproviders ondersteund. Stel je geen fallback-font in? Dan word je e-mail weergegeven in het standaardfont van de mailboxprovider.

Blijf testen

Ook bij webfonts is het belangrijk om je e-mails goed te testen, bijvoorbeeld door de weergave van e-mails in verschillende e-mailclients te controleren. Dat doe je bijvoorbeeld door testmails te versturen aan een Hotmail-, Gmail- en Yahoo-adres.