Korte samenvatting:
Pas het lettertype aan in de broncode van je e-mailtemplate. Vervang overal de lettertypen door een veilig lettertype met een reserve, zoals Verdana, Arial, sans-serif. Niet elk e-mailprogramma kan webfonts (lettertypen die via internet worden geladen) tonen.
Je huisstijl schrijft een bepaald lettertype voor. Natuurlijk wil je dat ook in je mailings gebruiken. Toch zien veel ontvangers een ander lettertype dan jij hebt gekozen. Dat komt door hoe e-mailprogramma's werken.
Hoe werken lettertypen in e-mail?
Een ontvanger ziet een lettertype alleen als dat op zijn computer of telefoon staat. Huisstijlfonts staan daar bijna nooit op. Een e-mailprogramma kan zo'n lettertype soms van internet laden. Dat heet een webfont.
Niet elk e-mailprogramma kan dat. Apple Mail en Outlook voor Mac kunnen het wel. Gmail en Outlook voor Windows kunnen het niet. Een deel van je ontvangers ziet je huisstijlfont dus nooit. Op caniemail.com zie je welke e-mailprogramma's webfonts ondersteunen.
Waarom een webfont geen goede oplossing is
Een webfont lijkt de oplossing, maar er zijn drie bezwaren:
- Het Procurios Platform ondersteunt op dit moment geen webfonts in e-mails. Dat komt door CORS, een beveiligingsregel van internet. Voor e-mails moet een lettertype namelijk van een ander domein (internetadres) geladen kunnen worden.
- Een deel van je ontvangers ziet het lettertype toch niet, omdat hun e-mailprogramma webfonts niet kan tonen.
- Veel webfonts komen van Google Fonts. Opent iemand je mailing, dan gaan er gegevens naar Google, zoals het IP-adres. Google verwerkt die ook in de Verenigde Staten. Staat in je privacyverklaring dat er geen gegevens buiten de EU worden verwerkt? Dan kun je Google Fonts niet gebruiken.
Kies een veilig lettertype met een reserve
Een veilig lettertype staat op bijna elke computer. Iedereen ziet dan hetzelfde lettertype en je hebt geen privacyrisico. Je gebruikt je huisstijlfont dan niet. Je kiest een veilig lettertype dat erop lijkt.
Ons advies: kies altijd een veilig lettertype.
Zet in de template ook altijd een reserve (in vaktaal: een fallback). Je zet dan meerdere lettertypen achter elkaar:
- Eerst het lettertype dat je wilt.
- Dan een lettertype dat erop lijkt.
- Als laatste een veilig lettertype.
Het e-mailprogramma kiest het eerste lettertype dat het kan tonen.
Veilige lettertypen
Deze lettertypen staan op bijna elke computer:
| Lettertype | Soort | Kenmerk |
|---|---|---|
| Arial | Schreefloos (sans-serif) | Neutraal en veel gebruikt |
| Helvetica | Schreefloos (sans-serif) | Lijkt sterk op Arial |
| Verdana | Schreefloos (sans-serif) | Breed en goed leesbaar op een scherm |
| Tahoma | Schreefloos (sans-serif) | Smaller dan Verdana |
| Trebuchet MS | Schreefloos (sans-serif) | Wat speelser |
| Georgia | Met schreef (serif) | Goed leesbaar op een scherm |
| Times New Roman | Met schreef (serif) | Klassiek lettertype |
| Courier New | Monospace | Alle letters zijn even breed |
Een schreefloos lettertype heeft geen kleine streepjes aan de uiteinden van de letters. Een lettertype met schreef heeft die streepjes wel.
Lettertype aanpassen in je template
Dit deel is voor SuperUsers die zelf e-mailtemplates ontwerpen of aanpassen. Je past het lettertype aan in de broncode. Dat is de HTML-code van je template. Begin je met een basistemplate uit de Template Generator? Lees dan ook het laatste deel van dit artikel.
Waar staat het lettertype in de code?
In de broncode van een e-mailtemplate staat het lettertype op twee manieren:
- Bovenaan, in het stijlblok onder 'Custom styles'. Daar staat het lettertype voor 'body' (gewone tekst) en voor de koppen (h1 tot en met h6).
- In bijna elk blok, bij de tekst, de koppen, de links en de knoppen. Zo'n regel staat direct bij het onderdeel zelf.
De regel in een blok wint van de regel bovenaan. Pas je alleen het stijlblok aan, dan zie je in je mailing dus vaak nog het oude lettertype. Een template uit de Template Generator heeft ruim 40 plekken met een lettertype. Pas ze allemaal aan.
De broncode van een template met onder Custom styles de regel body en font-family Arial, sans-serif.
Zo pas je het lettertype veilig aan
Je werkt eerst in een kopie. Zo kan er niets misgaan met je echte template.
- Ga naar Mailings > Instellingen > E-mail templates (1). Klik achter de template die je wilt aanpassen op het potlood (2).
- Klik in het veld Broncode, selecteer alle code en kopieer die.
- Ga terug naar het overzicht en klik op 'E-mail template toevoegen' (3). Geef de kopie een duidelijke titel, bijvoorbeeld 'Test lettertype'. Plak de code in het veld Broncode.
- Zoek in de broncode naar 'font-family'. Dat kan met Ctrl+F (Windows) of Cmd+F (Mac). Zo vind je alle plekken waar een lettertype staat.
- Vervang bij elke plek de lettertypen door jouw reeks. Zie je 'font-family: inherit'? Laat die regel dan staan.
- Scroll naar beneden. Onder de code zie je een live voorbeeld van je template. Controleer of alles er goed uitziet.
- Sla de template op met de knop onder het voorbeeld.
- Maak een testmailing met de kopie. Bekijk die in de e-mailprogramma's die je ontvangers vaak gebruiken, zoals Gmail, Outlook en Apple Mail. Hoe je een mailing maakt, lees je in het artikel 'Hoe maak en verstuur ik een mailing?'.
- Ben je tevreden? Plak dan de aangepaste code in je oorspronkelijke template en sla die op. Of gebruik voortaan het nieuw aangemaakte template.
Dit stond er bijvoorbeeld in een template uit de Template Generator:
'Trebuchet MS', Arial, sans-serif
Dit wordt het na je aanpassing:
Verdana, Arial, sans-serif
Het e-mailprogramma probeert eerst Verdana. Kan dat niet, dan probeert het Arial. Kan dat ook niet, dan kiest het zelf een schreefloos lettertype. Dat doet 'sans-serif'.
Tip: Er zijn veel plekken om aan te passen. In de browser kun je wel zoeken, maar niet vervangen. Plak de code daarom in een tekstprogramma met 'Zoeken en vervangen'. Vervang daar alle plekken tegelijk. Kopieer de code daarna terug naar het veld Broncode.
Wat gebeurt er met mailings die je al hebt gemaakt?
Heb je nog niet verzonden mailings die dezelfde template gebruiken? Dan krijgen die ook het nieuwe lettertype. Een lettertype aanpassen is een kleine wijziging. Je kunt die ook makkelijk terugdraaien.
Let op: Pas je bestaande contentblokken in de template flink aan? Dan kunnen bestaande blokken in concepten kapot gaan. Een extra blok toevoegen kan wel veilig. Test grotere aanpassingen daarom altijd eerst in een kopie.
Voorbeelden van lettertypereeksen
Zet de naam van een lettertype tussen enkele aanhalingstekens als die uit meerdere woorden bestaat, zoals 'Times New Roman'. Eindig altijd met sans-serif, serif of monospace.
| Je huisstijlfont is | Zo schrijf je de reeks |
|---|---|
| Schreefloos | 'Jouw huisstijlfont', Verdana, Arial, sans-serif |
| Met schreef | 'Jouw huisstijlfont', Georgia, 'Times New Roman', serif |
| Niet nodig, je kiest een veilig lettertype | Verdana, Arial, sans-serif |
Een ontvanger ziet je huisstijlfont alleen als dat op zijn computer staat. Anders ziet hij het eerstvolgende lettertype uit de reeks.
Een ander lettertype voor koppen
Wil je voor koppen een ander lettertype dan voor gewone tekst? Pas dan de regel voor koppen in het stijlblok aan:
h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', serif; color: #FF822F; } Pas ook de koppen in de blokken aan. Je herkent die aan h1, h2 of h3 in de code.
Systeemtemplates
Systeem-e-mails, zoals een activatiemail, hebben een eigen template. Die pas je op dezelfde manier aan. Je vindt ze onder Mailings > Instellingen > Systeem templates.
In een systeemtemplate staat het lettertype alleen in het stijlblok bovenaan. Dat zijn twee plekken: 'body' en de koppen. Meer over systeemtemplates lees je in het artikel 'Systeem templates instellen voor notificatie e-mails'.
Begin je met een basistemplate uit de Template Generator?
Je hoeft niet altijd helemaal zelf te beginnen. Je kunt met de Template Generator een basistemplate maken en die daarna aanpassen aan je wensen.
In de generator kies je onder Stijl bij Lettertype en Lettertype koppen voor 'Schreefloos' of 'Schreef'. Een eigen lettertype kies je daar niet. Dat pas je daarna aan in de broncode, zoals hierboven staat. Hoe je de generator gebruikt, lees je in het artikel 'E-mailtemplates maken met de Template Generator'.
Let op: Maak je de template later opnieuw met de Template Generator? Dan staat het standaard lettertype er weer in. Pas het lettertype dan opnieuw aan.
Meer lezen
- Bouw je een volledig eigen template? Dan lees je in het artikel 'Een eigen layout maken' hoe zo'n template is opgebouwd.
- Meer over het ontwerp van je mailing lees je in het artikel 'Tips voor goed ontwerp'.