Home Blog Ondersteuning van webfonts in e-mail

Ondersteuning van webfonts in e-mail

Ondersteuning van webfonts in e-mail

Geschreven door Wilbert Heinen / 14 juli 2017 / Techniek

Webdesigners kunnen steeds creatiever gebruikmaken van typografie. Zij kunnen tegenwoordig ook kiezen uit een niet-standaard webfont voor hun designs. Hierbij moet wel rekening gehouden worden met de leesbaarheid. Helaas gebeurt dit binnen e-maildesign nog te weinig. Dat is jammer, want iedereen wil toch dat het webfont voor zowel e-mail als voor de website hetzelfde is? In dit blogartikel lees je alles over de voor- en nadelen van webfonts in e-mail. Inclusief hoe je dit technisch moet aanpakken. Zodat je hierna zelf de keuze kunt maken of je wel of niet webfonts in e-mail moet gebruiken.

Wel of geen webfonts in e-mail?

De belangrijkste reden om webfonts in e-mail te verwerken is heel simpel: het is nu eenmaal mooier. Helaas is het e-maildesigners in de afgelopen jaren wel duidelijk geworden dat wat mooier is, niet altijd werkt in de praktijk. En dat is ook het geval bij typografie in e-mail. Webfonts worden nu eenmaal niet breed ondersteund door alle e-mailclients, zoals je verderop in dit blog kunt zien.

Groei van mobiele opens

De stijgende groei van het aantal e-mails dat op mobiele apparaten wordt geopend biedt veel mogelijkheden. Volgens de laatste cijfers van Litmus, juni 2017, wordt gemiddeld 51% van de e-mails geopend op een smartphone of tablet, waarvan 31% op iPhones, 11% op iPads, 4% op Google Android en 5% in de Samsung E-mail App. Onze cijfers uit de E-mail Benchmark 2017 bevestigen dat. De standaard e-mail apps van iPhone, iPad en Android apparaten ondersteunen webfonts, maar bijvoorbeeld een Gmail App niet. Hier dient dus wel rekening mee gehouden te worden, maar niet getreurd; er zijn ook nog desktop e-mailclients die webfonts ondersteunen zoals Apple Mail en de Outlooks op Mac. Hierdoor is er dus nog steeds een grote kans dat de ontvanger van je e-mail ook daadwerkelijk de webfonts te zien krijgt!

E-mailclients die webfonts ondersteunen

Figuur 1: E-mailclients die webfonts ondersteunen


Hoe gebruik ik webfonts in e-mail?

Het toepassen van een e-mail font kan op een aantal manieren. Zo kun je webfonts via @import in je mail inladen of je kunt ook een specifiek webfont op je eigen server plaatsen. Deze kun je vanaf die locatie inladen in je e-mail. Dit doe je via @font-face. Hieronder leg ik je uit op welke wijze je beide manieren in je e-mail kunt integreren.

@import

De @import regel geeft je de mogelijkheid om styles uit andere stylesheets in te laden. Dit doe je ook met Google Fonts. Deze @import regel plaats je als eerste binnen je stylesheet en zo laad je de styles van bijvoorbeeld het Google font 'Merienda' in.

1

<style type="text/css">

>

2 @import url(http://fonts.googleapis.com/css?family=Merienda);

3 ...

4 </style>

Vervolgens kun je het font 'Merienda' gebruiken binnen de e-mail. Bijvoorbeeld op een table cell:

1 <td style="font-family:'Merienda', Verdana, Geneva, sans-serif;">

@font-face

Ook met de CSS-regel @font-face is het mogelijk om specifieke webfonts in e-mail te gebruiken. Het voordeel van deze manier is dat je niet alleen fonts uit de bibliotheek van Google Fonts kan gebruiken, maar bijvoorbeeld ook een specifiek font van jouw merk.

De CSS met gebruik van @font-face ziet er als volgt uit:

1 <style type="text/css">

2 @font-face {

3 font-family:'ExampleFont';

4 src:url('http://www.example.com/pad/naar/font.eot');

5 src:url('http://www.example.com/pad/naar/font.eot?#iefix')

6 format("embedded-opentype"),

7 url('http://www.example.com/pad/naar/font.ttf')

8 format("truetype"),

9 url('http://www.example.com/pad/naar/font.woff')

10 format("woff");

11 font-style:normal;

12 font-weight:normal;

13 }

14 ...

15 </style>

16 <td style="font-family:'ExampleFont', Verdana, Geneva, sans-serif;">

Met een conditional comment zeg je tegen Outlook dat deze een ander font moet gebruiken dan eerder aangegeven. Outlook zal in onderstaand voorbeeld het font Verdana gebruiken op table cells in de e-mail.

Link

Je kunt eventueel ook linken naar een externe stylesheet in de head van je HTML als extra manier om je webfonts in te laden voor het geval bovenstaande manieren niet geheel werken. Deze werkt zelfs iets beter dan de @import manier

<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet" type="text/css">

Hier kun je een mso conditional omheen plaatsen, zodat je zeker weet dat dit niet gelezen wordt door Outlook.

<!--[if !mso]><!-->

<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet" type="text/css">

<!--<![endif]-->

Nu we het toch over Outlook hebben. Mocht je geen ontvangers in jouw database hebben die hun e-mail openen in Outlook 2007, 2010, 2013 of 2016 dan kun je @import of @font-face gebruiken. Maar heb je deze wel dan moet je helaas nog een paar handelingen uitvoeren om webfonts in de e-mail te integreren.

Wanneer je @import of @font-face in je e-mail gebruikt, zet Outlook al je fonts om naar Times New Roman en dat is in de meeste gevallen niet wenselijk. Maar dit kun je op twee manieren voorkomen en wel door de @import of @font-face in een media query te plaatsen of een fallback font definiƫren binnen een conditional comment voor Outlook specifiek.

De media query wordt niet gelezen door Outlook en zodoende genegeerd, waardoor je fonts niet meer omgezet worden naar Times New Roman. Dit heeft als gevolg dat je webfont niet meer wordt getoond in Outlook 2000.

1 <style type="text/css">

2 @media screen {

3 @font-face {

4 font-family:'ExampleFont';

5 src:url('http://www.example.com/pad/naar/font.eot');

6 src:url('http://www.example.com/pad/naar/font.eot?#iefix')

7 format("embedded-opentype"),

8 url('http://www.example.com/pad/naar/font.ttf')

9 format("truetype"),

10 url('http://www.example.com/pad/naar/font.woff')

11 url('http://www.example.com/pad/naar/font.woff')

12 font-style:normal;

13 font-weight:normal;

14 }

15 }

16 ...

17 </style>

Met een conditional comment zeg je tegen Outlook dat deze een ander font moet gebruiken dan eerder aangegeven. Outlook zal in onderstaand voorbeeld het font Verdana gebruiken op table cells in de e-mail.

1 <style type="text/css">

2 @import url(http://fonts.googleapis.com/css?family=Merienda);

3 ...

4 </style>

5 <!--[if mso]>

6 <style>

7 td { font-family: Verdana !important;}

8 </style>

9 <![endif]-->

Een laatste tip voor webfonts in e-mail

De laatste tip die ik je wil meegeven: geef altijd een goed websafe font als alternatief mee. Het is belangrijk dat hierbij wel goed let op de hoogte en de breedte van de karakters en laat deze zoveel mogelijk overeenkomen. Als de e-mail dan wordt geopend in een e-mailcliƫnt waar webfonts niet worden ondersteund heeft dit weinig tot geen invloed op bijvoorbeeld de uitlijning van de e-mail. Je kunt hierbij denken aan titels die twee regels in beslag nemen en je design uit elkaar drukken.

websafe font

Figuur 2: Websafe font

Scroll omhoog