Aangepaste lettertypen toevoegen in e-mailtemplates

Wat je leert

Leer hoe je nieuwe lettertypen toevoegt aan de Klaviyo-editor voor e-mailtemplates zodat je e-mails aansluiten bij je huisstijl. In dit artikel leer je ook over de voor- en nadelen van het gebruik van aangepaste lettertypen en hoe je een lettertype kiest dat door de meeste inboxen wordt ondersteund. 

Je kunt Google Fonts, Adobe Typekit of geïmporteerde (d.w.z. zelf gehoste) lettertypen gebruiken in je e-mails. Houd er wel rekening mee dat alleen bepaalde e-mailinboxen aangepaste lettertypen ondersteunen en dat veel populaire clients (zoals Gmail en Yahoo) dat niet doen. 

Belangrijke termen

• Aangepast lettertype
  Elk lettertype dat niet standaard aanwezig is in de Klaviyo-editor 
• Weblettertype
  Een aangepast lettertype dat vanuit een externe bron geladen moet worden 
• Lettertype geschikt voor het web
  Een lettertype dat op de meeste apparaten lokaal is opgeslagen en daarom niet vanuit een externe bron geladen hoeft te worden om weergegeven te worden 
• Back-up-lettertype
  Een voor het web geschikt lettertype dat wordt gebruikt in inboxen die je aangepaste lettertype niet ondersteunen

Ondersteuning voor en beperkingen van aangepaste lettertypen

Aangepaste lettertypen helpen om je marketingcommunicatie een consistente stijl te geven en de content van je e-mail af te stemmen op je e-commercesite. Maar weblettertypen (d.w.z. lettertypen die vanuit een externe bron worden geladen en niet lokaal beschikbaar zijn op een apparaat) worden mogelijk niet op alle apparaten of e-mailclients gerenderd zoals verwacht. De standaard lettertypen van Klaviyo zijn vooraf geïnstalleerd op de meeste computers en apparaten, zodat je een consistente ervaring kunt bieden voor alle abonnees. 

E-mailclients die weblettertypen ondersteunen zijn onder andere:

• Apple Mail
• iOS Mail (de standaard e-mailbrowser op iOS)
• Google Android (behalve Android 2.3, deze versie biedt geen ondersteuning voor de @import-methode die door Google- en Adobe-lettertypen wordt gebruikt)
• Samsung Mail (Android 8.0)
• Outlook voor Mac

Aangepaste lettertypen in Gmail en andere niet-ondersteunde inboxen

Je ontvangers die Gmail gebruiken (of andere inboxen die geen aangepaste lettertypen ondersteunen) zien mogelijk je back-up-lettertype (dit kun je instellen in je e-mailtemplate) in plaats van het gekozen aangepaste lettertype. Om dit te voorkomen gebruik je een aangepast lettertype dat geschikt is voor het web. Deze lettertypen zijn beschikbaar op de meeste apparaten, ongeacht hun ondersteuning van weblettertypen. 

Hier vind je voor het web geschikte lettertypen en informatie over ondersteuning per apparaat. 

Een nieuw aangepast lettertype toevoegen in de editor voor e-mailtemplates 

Een aangepast lettertype toevoegen aan een e-mailtemplate: 

1. Open een tekstblok in je template of het tabblad Stijlen van je template.
2. Klik in het lettertypemenu op Lettertype toevoegen onderaan het dropdownmenu.
3. Kies in het venster dat verschijnt Google-lettertype, Adobe-lettertype of Lettertype importeren, afhankelijk van de bron van je lettertype.
4. Volg de instructies in de onderstaande gedeeltes voor je lettertype (Google, Adobe of geïmporteerde lettertypen).

Nadat je een lettertype hebt toegevoegd aan je e-mailtemplate, is het beschikbaar voor alle andere templates en voor je aanmeldingsformulieren.

Extra lettertype-varianten toevoegen aan een bestaand aangepast lettertype

Je kunt de geselecteerde variaties voor je aangepaste lettertypen altijd bewerken, verwijderen of aanpassen onder Afbeeldingen en merk > Lettertypen.

Een bestaand lettertype updaten

Om extra varianten te selecteren voor een aangepast Google-lettertype of een geïmporteerd lettertype dat je al hebt toegevoegd: 

1. Ga in Klaviyo naar Content > Afbeeldingen en merk.
2. Klik op Lettertypen.
3. Zoek het lettertype dat je wilt bewerken onder Jouw lettertypen. 
4. Klik in de kaart van dat lettertype op de drie stippen rechtsboven.
5. Klik op Bewerken in het menu dat verschijnt. 
6. Klik op # lettertype-varianten geselecteerd om de lijst met lettertype-varianten uit te vouwen. 
7. Selecteer aanvullende varianten die je wilt toevoegen.
8. Klik op Lettertype updaten.

Je kunt geen varianten toevoegen aan een Adobe-lettertype nadat je het hebt geüpload, omdat de varianten ingebouwd zijn in je Typekit-link.   

If you receive the error message A font with this name already exists, follow the steps above to edit the existing version of the font, rather than re-adding it. 

Een lettertype verwijderen

1. Ga in Klaviyo naar Content > Afbeeldingen en merk.
2. Klik op Lettertypen.
3. Zoek het lettertype dat je wilt bewerken onder Jouw lettertypen. 
4. Klik in de kaart van dat lettertype op de drie stippen rechtsboven.
5. Klik op Verwijderen in het menu dat verschijnt. 

Alle berichten in Klaviyo die momenteel het aangepaste lettertype gebruiken, gebruiken onmiddellijk het back-up-lettertype. Als je het lettertype opnieuw toevoegt, gebruiken deze e-mails het lettertype opnieuw. 

Een Google-lettertype toevoegen

Een Google-lettertype toevoegen:

1. Typ de naam van het Google-lettertype dat je wilt gebruiken.
2. Kies een back-up-lettertype.
3. Klik op Lettertype toevoegen. 

Een Adobe-lettertype toevoegen

Adobe-lettertypen zijn alleen beschikbaar voor gebruikers met een actief Adobe Fonts-abonnement. Een Adobe-lettertype toevoegen:

1. Klik op Adobe-lettertype.
2. Plak je CSS-adres. Het adres moet dit formaat hebben: https://use.typekit.com/123ABC.
3. Kies een back-up-lettertype.
4. Klik op Lettertype toevoegen. 

Een geïmporteerd lettertype toevoegen

Geïmporteerde lettertypen, soms ook zelfgehoste lettertypen genoemd, worden alleen aanbevolen voor verzenders die toegang hebben tot een ontwikkelaar. Je kunt het lettertype-bestand niet rechtstreeks uploaden naar Klaviyo. Als je geen toegang hebt tot een ontwikkelteam, raden we je aan om een Google- of Adobe-lettertype te zoeken dat lijkt op je gewenste lettertype. 

Een geïmporteerd lettertype gebruiken:

1. Host het lettertype op je servers of via een service voor het hosten van lettertypen. Zorg ervoor dat je Resources van verschillende bronnen delen (Cross-Origin Resource Sharing, CORS) inschakelt door de header Access-Control-Allow-Origin in te stellen op *, zodat het lettertype toegankelijk is voor de inboxen van je ontvangers. Meer informatie over CORS.
2. Zodra je het lettertype hebt gehost, klik je op Lettertype importeren in het venster Lettertype toevoegen en plak je de hosting-URL in het veld Bronadres.
3. Voeg de naam, het gewicht en de opmaak van je lettertype toe in de betreffende velden.
4. Kies een back-up-lettertype.
5. Klik op Lettertype toevoegen. 

Over back-up-lettertypen

Bij alle soorten aangepaste lettertypen moet je een back-up-lettertype selecteren. Dit lettertype verschijnt voor ontvangers die clients gebruiken die je aangepaste lettertype niet ondersteunen. Kies een lettertype uit de lijst met beschikbare opties dat qua stijl op je aangepaste lettertype lijkt. 

Als je bijvoorbeeld Poppins (een Google-lettertype) gebruikt als je aangepaste lettertype en Arial als je back-up-lettertype, zien e-mailontvangers de volgende lettertypen: 

• Ontvangers die je e-mail openen in een browser die weblettertypen ondersteunt, (bijv. Apple Mail, iOS Mail) zien Poppins 
• Ontvangers die je e-mail openen in een browser die geen weblettertypen ondersteunen (bijv. Gmail), zien Arial

Een aangepast lettertype toepassen

Nadat je een aangepast lettertype hebt ingesteld, kun je dit toepassen op elke tekst in je template, waaronder: 

• De hoofdstijlen van je templates 
• De stijlen van blokken 
• Een specifiek stuk tekst in een tekstblok 
• Knopblokken, productblokken en alle andere bloktypen die tekst bevatten 

Een aangepast lettertype toepassen in een tekstblok:

1. Selecteer het tekstblok dat de tekst bevat waarop je het lettertype wilt toepassen.
2. Markeer de specifieke tekst waarop je het lettertype wilt toepassen.
3. Selecteer het aangepaste lettertype uit het dropdownmenu. 

Voor alle andere bloktypen, of voor blok- en templatestijlen, selecteer je het lettertype uit het betreffende dropdownmenu.

In tabelblokken en gesplitste blokken verschijnt je aangepaste lettertype op het canvas (bijv. het voorbeeld van je bewerking), maar niet in het paneel aan de linkerkant. Het paneel aan de linkerkant toont je back-up-lettertype in plaats van het aangepaste lettertype. 

Een voorbeeld van je aangepaste lettertypen 

Zodra je template klaar is, stuur je jezelf een voorbeeldmail door te klikken op Voorbeeld weergeven en testen > Test verzenden. Probeer het bericht op verschillende apparaten te openen om te zien hoe het voor verschillende ontvangers verschijnt. Je kunt ook een tool zoals Email on Acid gebruiken om een voorbeeld te bekijken op een grotere verscheidenheid aan apparaten. 

Extra hulpbronnen

• Gids voor de e-mailtemplate-editor
• Lettertypen in e-mail