Aangepaste lettertypen gebruiken in aanmeldingsformulieren

Wat je leert

Leer hoe je een aanmeldingsformulier ontwerpt met aangepaste lettertypen, zodat je klant een sterke merkidentiteit ervaart en consistent is met de rest van je site.

Het maken van een mooi ontworpen aanmeldingsformulier is van het grootste belang om ze te dwingen het doel van je formulier te volgen. Als je merk lettertypen gebruikt die niet beschikbaar zijn in de editor van het aanmeldingsformulier, is het toevoegen van deze aangepaste lettertypen een eenvoudige manier om je formulieren er samenhangend uit te laten zien met de rest van je site. Nadat je je lettertypen hebt toegevoegd, kun je je aanmeldingsformulier naar eigen inzicht aanpassen.

Belangrijke termen

• Aangepast lettertype
  Elk lettertype dat niet standaard aanwezig is in de Klaviyo editor. Dit omvat:
  • Google-lettertypen
  • Adobe-lettertypen
  • Geïmporteerde lettertypen
• Webveilig lettertype
  Een lettertype dat op de meeste apparaten lokaal wordt gebruikt en daarom niet van een externe bron hoeft te worden geladen om te worden weergegeven.
• Fallback lettertype
  Een webveilig lettertype dat wordt gebruikt als een pagina het primaire lettertype niet kan laden.

Aangepaste lettertypen toevoegen aan je account

Navigeer in het hoofdmenu aan de linkerkant naar Inhoud > Afbeeldingen & Merk. Daar klik je op het tabblad Lettertypen. Je kunt een Google lettertype, Adobe lettertype of een Geïmporteerd lettertype toevoegen.

Een Google-lettertype toevoegen

Om een Google lettertype toe te voegen:

1. Selecteer de Font name dropdown om een lijst te zien met alle beschikbare Google lettertypen, behalve de lettertypen die je al in je account hebt geladen.
2. Kies het gewenste lettertype. Bij het selecteren zie je een voorbeeld van het lettertype onder de dropdown, evenals het aantal mogelijke variaties (bijvoorbeeld vet, cursief, etc.).
   • Als je meer dan 1 variatie wilt toevoegen, klik dan op het pijltje naast het aantal mogelijke variaties en kies de lettertypen die je wilt toevoegen.
3. Selecteer een Fallback-lettertype.
4. Klik op Lettertype toevoegen. Je toegevoegde lettertype wordt nu weergegeven in de sectie Your Fonts onderaan de pagina.

In het gedeelte Uw lettertypen kun je de lettertypen zien die je aan je account hebt toegevoegd. Om een van je lettertypes in dit gedeelte te bewerken of te verwijderen, selecteer je de drie puntjes op het lettertype.

Een Adobe-lettertype toevoegen

Om een Adobe lettertype toe te voegen:

1. Navigeer naar Adobe lettertypen.
2. Zoek naar je Adobe font link en selecteer je font.
3. Klik naast de naam van je lettertype op het codepictogram.
4. Voer indien nodig een nieuwe projectnaam in en klik op Opslaan.
5. Kopieer in het volgende venster de URL https://use.typekit.net voor het lettertype dat je wilt toevoegen. Neem de .css niet op als onderdeel van de URL wanneer je deze kopieert.
   
6. Navigeer terug naar Klaviyo en plak de URL in het CSS Adresveld.
7. Selecteer Doorgaan en kies dan een Fallback-lettertype voor het lettertype dat je wilt uploaden. Merk op dat als een lettertype al beschikbaar is in je account, er een groen vinkje naast het lettertype staat en het bestaande fallback lettertype wordt weergegeven.
   
8. Selecteer Lettertype toevoegen.

Zodra je je lettertype hebt toegevoegd, wordt het vermeld in de sectie Your Fonts (Jouw lettertypen) onderaan de pagina. Om een van je lettertypen in dit gedeelte te bewerken, selecteer je de drie puntjes op het lettertype.

Een geïmporteerd lettertype toevoegen

Als je een aangepast lettertype hebt gekocht of gedownload dat niet wordt gehost door een externe bron, kun je het nog steeds gebruiken in een Klaviyo formulier. Host eerst de fontbestanden op een locatie die toegankelijk is voor Klaviyo (bijvoorbeeld in de assets van uw site of op een font hosting platform). Zorg ervoor dat je Cross-Origin Resource Sharing (CORS) inschakelt door de Access-Control-Allow-Origin header op * te zetten, zodat het lettertype toegankelijk is voor de apparaten van je ontvangers.

Om een geïmporteerd lettertype toe te voegen:

1. Geef je lettertype een naam.
2. Geef een lettertype-gewicht, stijl en een bron-URL op. De bron-URL moet een geldige URL zijn die eindigt op WOFF, WOFF2, TTF, EOT of SVG.
3. Optioneel: Om extra variaties toe te voegen, selecteer je Lettertypevariatie toevoegen en herhaal je stap 2 voor deze variatie.
4. Selecteer Lettertype toevoegen om dit lettertype toe te voegen aan de sectie Uw lettertypen .

In Your Fonts kun je de lettertypen zien die je in je account hebt geïmporteerd. Je kunt je lettertypen ook verwijderen of bewerken door de 3 puntjes op het lettertype te selecteren.

Een lettertype bewerken

Om een bestaand aangepast lettertype te bewerken:

1. Navigeer naar Inhoud > Afbeeldingen & merk > Lettertypen.
2. Zoek het lettertype dat je wilt bewerken in de sectie Your Fonts (Jouw lettertypen) onderaan de pagina.
3. Klik in de kaart van dat lettertype op de 3 puntjes in de bovenhoek.
4. Kies Bewerken. Van hieruit kun je:
   • Bewerk het fallback lettertype voor elk aangepast lettertype. 
   • Alleen voor Google en Klaviyo-hosted fonts kun je de geselecteerde variatie bewerken of eraan toevoegen door # font variatie te selecteren om de lijst uit te breiden en vervolgens de fonts te selecteren die je wilt toevoegen.
     
     

     Je kunt geen variatie toevoegen aan Adobe lettertypen nadat je ze hebt geüpload, omdat de variatie is ingebouwd in je Typekit link. Om variatie toe te voegen aan een Adobe lettertype, moet je het bestaande lettertype verwijderen en het opnieuw toevoegen met een andere Typekit link die de variatie heeft die je wilt toevoegen.

5. Als je klaar bent met het bewerken van je lettertype, selecteer je Lettertype bijwerken.

Een lettertype verwijderen

Om een lettertype te verwijderen:

1. Navigeer naar de sectie Uw lettertypen .
2. Klik op het lettertype dat je wilt verwijderen op de 3 puntjes en kies dan Verwijderen. Als je ervoor kiest om je lettertype te verwijderen, verschijnt er een modal met de melding dat, als je lettertype wordt gebruikt in formulieren, je fallback lettertype wordt weergegeven nadat je het toegevoegde lettertype hebt verwijderd.
   
3. Selecteer Verwijderen.

Zodra een aangepast lettertype wordt verwijderd, zullen alle formulieren in Klaviyo die momenteel het aangepaste lettertype gebruiken, onmiddellijk terugkeren naar het fallback lettertype. Als je het lettertype opnieuw toevoegt, zullen die formulieren het weer gaan gebruiken. 

Aangepaste lettertypen gebruiken in de bouwer van het aanmeldingsformulier

Om je aangepaste lettertype te gebruiken in een aanmeldingsformulier, bewerk je gewoon de tekst in de voorbeeldweergave van het formulier:

1. Navigeer naar het tabblad aanmeldingsformulier.
2. Zoek het formulier dat je wilt bewerken en klik op de 3 puntjes ernaast.
3. Selecteer in het voorbeeld van het formulier de tekst die je wilt bewerken. 
4. Markeer de tekst in het Tekstmenu rechts.
5. Gebruik de lettertypes dropdown bovenaan om je aangepaste lettertype te selecteren. Merk op dat lettertypen uit het gedeelte Uw lettertypen van je account bovenaan de lijst verschijnen. 
   

   Tijdens het bewerken verschijnt je aangepaste lettertype op het canvas (bijvoorbeeld het bewerkingsvoorbeeld), maar niet in het paneel aan de linkerkant. Het paneel aan de linkerkant toont je fallback lettertype in plaats van het aangepaste lettertype.

6. Als je tevreden bent met je wijzigingen, klik je op Publiceren om ze live te zetten.

Het website-lettertype wordt beïnvloed door Klaviyo.js

Klaviyo actief op website-tracking (Klaviyo.js), moet handmatig of via je e-commerce-integratie worden geïnstalleerd om aanmeldingsformulieren van Klaviyo op je website te publiceren. Als je slechts enkele lettertypevariaties hebt geladen, laadt Klaviyo.js de resterende variaties in je bibliotheek wanneer deze in je site worden geïnjecteerd. Hierdoor kunnen de lettertypen op je site tijdens dit proces enigszins worden aangepast, zoals een verandering in het gewicht van de header van de site. 

Er zijn 2 opties voor het oplossen van wijzigingen aan je lettertypen door Klaviyo.js. Je kunt het volgende doen:

• Verwijder de relevante lettertypes uit je lettertypebibliotheek van Klaviyo. 
• Werk de CSS op de header van je site bij zodat deze niet wordt overschreven wanneer Klaviyo.js de extra variaties laadt. 
  

  Omdat deze optie diepgaande kennis van CSS vereist, heb je mogelijk de hulp van een ontwikkelaar nodig. Klaviyo kan geen hulp bieden bij het aanpassen van de CSS van je site, maar we hebben wel een uitgebreid partnernetwerk.

Extra hulpbronnen 

• Cursus: Een effectieve acquisitiestrategie opzetten met behulp van aanmeldingsformulieren
• Een aangepast lettertype op je site hosten