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.

This content requires Functional cookies to be enabled.

Update Cookie Settings

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-mailapp 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, samen met een overzicht van ondersteuning per apparaat.

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

Een aangepast lettertype toevoegen aan een e-mailtemplate:

1. Selecteer een tekstblok in je template of open de instellingen voor Stijlen van je template.
2. Klik in de dropdown met lettertypen op Standaardlettertypen bewerken. Klik in het paneel Lettertypen op Lettertype toevoegen.
3. Kies in het venster dat verschijnt Google Fonts, Adobe Fonts 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.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Aangepaste lettertypen beheren

Je kunt je aangepaste lettertypen bewerken of verwijderen in Content > Media & merk, onder Merk.

Een bestaand lettertype updaten

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

1. Ga in Klaviyo naar Content > Media en merk.
2. Open het tabblad Merk en selecteer vervolgens Lettertypen. Als op je tabblad Merk in plaats daarvan Stijl staat, open je dat en zoek je het gedeelte Lettertypen.
3. Zoek het lettertype dat je wilt bewerken in de sectie Lettertypen.
4. Klik op het menu met drie puntjes naast het lettertype.
5. Klik op Bewerken in het menu dat verschijnt.
6. Voor een Google-lettertype open je variaties en selecteer je de extra variaties die je wilt gebruiken.
7. Voor een geïmporteerd lettertype klik je op Lettertypevariatie toevoegen en voer je vervolgens de bron-URL in. Selecteer daarna het lettertypegewicht en de lettertypestijl. Herhaal dit voor elke variatie die je wilt toevoegen.
8. Klik op Opslaan.

Je kunt geen variaties toevoegen aan een Adobe-lettertype in Klaviyo, omdat de variaties afkomstig zijn van je Typekit-link. Je kunt het fallback-lettertype in Klaviyo bewerken.

Als je de foutmelding A font with this name already exists ontvangt, volg je de bovenstaande stappen om de bestaande versie van het lettertype te bewerken, in plaats van het opnieuw toe te voegen.

Een lettertype verwijderen

Het verwijderen van een aangepast lettertype heeft invloed op content die het gebruikt, waaronder andere templates en aanmeldingsformulieren. Die content gebruikt het terugvallettertype als het aangepaste lettertype niet meer beschikbaar is. Als je dezelfde lettertypefamilie en variaties opnieuw toevoegt, wordt deze weer beschikbaar voor content die deze nog steeds gebruikt.

1. Ga in Klaviyo naar Content > Media en merk.
2. Open het tabblad Merk en selecteer vervolgens Lettertypen. Als op je tabblad Merk in plaats daarvan Stijl staat, open je dat en zoek je het gedeelte Lettertypen.
3. Zoek het lettertype dat je wilt verwijderen in de sectie Lettertypen.
4. Klik op het menu met drie puntjes naast het lettertype.
5. Klik op Verwijderen in het menu dat verschijnt.
6. Klik opnieuw op Verwijderen in het bevestigingsvenster.

Een Google-lettertype toevoegen

Een Google-lettertype toevoegen:

1. Open Naam van lettertype, zoek naar het Google-lettertype dat je wilt en selecteer het.
2. Als je variaties zoals vet of cursief wilt toevoegen, vouw je # font variaties available uit en selecteer je de variaties die je wilt gebruiken.
3. Kies een back-up-lettertype.
4. 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. Selecteer Adobe Fonts in het dialoogvenster Lettertype toevoegen als dit nog niet is geselecteerd.
2. Plak de URL van je Adobe-webproject in CSS Address. Gebruik de indeling https://use.typekit.net/abcdefg.css.
3. Klik op Doorgaan om de lettertypen in het project te laden.
4. Kies een terugvallettertype voor elk lettertype dat nog niet is toegevoegd.
5. 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, open je Lettertype importeren in het venster Lettertype toevoegen en plak je de directe URL van het lettertypebestand in Bronadres. De URL moet verwijzen naar een bestand van het type .woff, .woff2, .ttf of .eot.
3. Voeg de naam, het gewicht en de opmaak van je lettertype toe in de betreffende velden.
4. Als je nog een variatie wilt toevoegen, klik je op Lettertypevariatie toevoegen en voer je het bronadres, de dikte en de stijl in. Gebruik voor elke variatie een andere URL voor het lettertypebestand en een andere combinatie van dikte/stijl.
5. Kies een back-up-lettertype.
6. 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 e-mailclient die weblettertypen ondersteunt (bijv. Apple Mail, iOS Mail) zien Poppins
• Ontvangers die je e-mail openen in een e-mailclient die geen weblettertypen ondersteunt (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
• In de stijlen van elk blok
• 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.

Voor tabel- en splitsingblokken selecteer je de tekst in het e-mailcanvas om deze te bewerken en je aangepaste lettertype toe te passen.

Een voorbeeld van je aangepaste lettertypen

Zodra je template klaar is, klik je op Voorbeeld, voer je je e-mailadres in de zijbalk van de voorbeeldweergave in en klik je op 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