Aangepaste lettertypen gebruiken in aanmeldingsformulieren

Wat je leert

Ontdek hoe je je aanmeldingsformulier kunt ontwerpen met aangepaste lettertypen, zodat je klanten een sterke merkidentiteit ervaren en consistentie met de rest van je site.

Als je merk lettertypen gebruikt die niet beschikbaar zijn in de editor voor het aanmeldingsformulier, voeg ze dan toe aan je Klaviyo-lettertypebibliotheek voordat je ze op je formulieren toepast. Je kunt Google Fonts, Adobe Fonts of geïmporteerde lettertypebestanden toevoegen.

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 is opgeslagen en daarom niet vanuit een externe bron geladen hoeft te worden om weergegeven te worden.
• Terugvallettertype
  Een webveilig lettertype dat wordt gebruikt als een pagina het primaire lettertype niet kan laden.

Aangepaste lettertypen toevoegen aan je account

Je kunt Google-lettertypen, Adobe-lettertypen of geïmporteerde lettertypen toevoegen aan je account. Open eerst je lettertypebibliotheek:

1. Ga in het hoofdmenu naar Content > Media & brand en selecteer vervolgens het tabblad Brand.
2. Selecteer Lettertypen in de zijbalk. Als je zijbalk in plaats daarvan Stijl weergeeft, selecteer je die en zoek je het gedeelte Lettertypen.

Een Google-lettertype toevoegen

Een Google-lettertype toevoegen:

1. Klik op Lettertype toevoegen en selecteer vervolgens Google-lettertype.
2. Open het vervolgkeuzemenu Google Font om beschikbare lettertypen te bekijken. Je kunt ook Google-lettertypen bekijken om opties te vergelijken. Als het lettertype al in je bibliotheek staat, bewerk je dat lettertype in plaats van het opnieuw toe te voegen.
3. Kies het lettertype dat je wilt om een voorbeeld en de beschikbare variaties (bijv. vet of cursief) te bekijken.
   • Open Lettertype variatie en selecteer de diktes en stijlen die je wilt gebruiken. Normal 400 is vereist en kan niet worden verwijderd.
4. Selecteer een reservelettertype.
5. Klik op Opslaan. Je toegevoegde lettertype wordt weergegeven in de sectie Lettertypen.

This content requires Functional cookies to be enabled.

Update Cookie Settings

In de sectie Lettertypen kun je de lettertypen zien die aan je account zijn toegevoegd. Als je een lettertype wilt bewerken of verwijderen, selecteer je de drie puntjes ernaast.

Een Adobe-lettertype toevoegen

Een Adobe-lettertype toevoegen:

1. Ga naar Adobe Fonts.
2. Zoek het lettertype dat je wilt gebruiken en selecteer het vervolgens.
3. Klik op het codepictogram (</>) of Toevoegen aan webproject.
4. Kies een bestaand webproject of maak een nieuw aan. Selecteer de letterdikte en -stijl die je wilt opnemen en sla het project daarna op.
5. Kopieer de stylesheet-URL die begint met https://use.typekit.net/ uit de embedcode van het project. Je kunt de .css -extensie toevoegen.

This content requires Functional cookies to be enabled.

Update Cookie Settings

6. Ga terug naar je lettertypebibliotheek in Klaviyo. Klik op Lettertype toevoegen, selecteer Adobe Fonts en plak vervolgens de URL in Adobe Fonts CSS-adres.
7. Klik op Lettertypen bekijken en selecteer vervolgens een Fallback-lettertype voor elke nieuwe lettertypefamilie in het project. Een lettertype dat al in je account staat, heeft een vinkje en toont het bestaande fallback-lettertype.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Klik op Opslaan.

Zodra je je lettertypen hebt toegevoegd, worden ze weergegeven in de sectie Lettertypen. Als je een lettertype wilt bewerken, selecteer je de 3 puntjes ernaast.

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 lettertypebestanden op een locatie die toegankelijk is voor Klaviyo (bijvoorbeeld in de assets van je site of op een platform voor lettertypehosting). Zorg ervoor dat je Resources van verschillende bronnen delen (Cross-Origin Resource Sharing, CORS) inschakelt door de Access-Control-Allow-Origin header in te stellen op *, zodat het lettertype toegankelijk is voor de apparaten van je ontvangers.

Een geïmporteerd lettertype toevoegen:

1. Klik op Lettertype toevoegen en selecteer vervolgens Aangepast lettertype.
2. Voer een naam in bij Aangepaste lettertypenaam. Kies een naam die nog niet in je fontbibliotheek staat.
3. Voer de Bron-URL voor je lettertypebestand in en selecteer vervolgens het Lettertypegewicht en de Lettertypestijl. Gebruik een toegankelijke HTTPS-URL met een bestandsnaam die eindigt op .woff, .woff2, .ttf of .eot. SVG-bestanden worden niet ondersteund.
4. Optioneel: om nog een variatie toe te voegen, klik je op Lettertypevariatie toevoegen en voer je de bron-URL, dikte en stijl in. Gebruik voor elke variatie een andere bron-URL en een andere combinatie van dikte/stijl.
5. Selecteer een reservelettertype.
6. Klik op Opslaan om het lettertype toe te voegen aan de sectie Lettertypen.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Via Lettertypen kun je de lettertypen zien die in je account zijn geïmporteerd. Als je een lettertype wilt verwijderen of bewerken, selecteer je de 3 puntjes ernaast.

Een lettertype bewerken

Een bestaand aangepast lettertype bewerken:

1. Ga naar Content > Media en merk en selecteer Merk. Selecteer Lettertypen in de zijbalk, of selecteer Stijl en zoek Lettertypen als dat de zijbalkoptie is die wordt weergegeven.
2. Zoek het lettertype dat je wilt bewerken in de sectie Lettertypen.
3. Klik op de 3 puntjes naast het lettertype.
4. Kies Lettertype bewerken. Vanaf hier kun je:
   • Bewerk het fallback-lettertype voor elk aangepast lettertype.
   • Voor Google Fonts selecteer je Lettertypevariaties om diktes en stijlen toe te voegen of te verwijderen. Normaal 400 moet geselecteerd blijven.
   • Voor geïmporteerde lettertypen, waaronder door Klaviyo gehoste lettertypen, bewerk je de bron-URL, dikte of stijl van een variatie. Gebruik Lettertypevariatie toevoegen om nog een bestand toe te voegen, of klik op het prullenbakpictogram naast een variatie om deze te verwijderen. Behoud minstens 1 variatie.

1. Als je klaar bent met het bewerken van een lettertype in Klaviyo, klik je op Opslaan.

Een lettertype verwijderen

Om een lettertype te verwijderen:

1. Ga naar Content > Media en merk en selecteer Merk. Selecteer Lettertypen in de zijbalk, of selecteer Stijl en zoek Lettertypen als dat de zijbalkoptie is die wordt weergegeven.
2. Klik bij het lettertype dat je wilt verwijderen op de 3 puntjes en kies Verwijderen. Er wordt een bevestigingsdialoogvenster geopend. Formulieren die het lettertype gebruiken, geven hun terugvaloptie weer wanneer het verwijderde lettertype niet meer kan worden geladen.

3. Selecteer Verwijderen.

Nadat een aangepast lettertype is verwijderd, tonen formulieren die dit lettertype gebruiken hun terugvallettertype wanneer het aangepaste lettertype niet meer kan worden geladen. Als je dezelfde lettertypefamilie opnieuw toevoegt, kunnen deze formulieren het weer gebruiken.

Aangepaste lettertypen gebruiken in de bouwer voor aanmeldingsformulieren

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

1. Ga naar het tabblad Aanmeldingsformulieren.
2. Zoek het formulier dat je wilt bewerken en klik op de 3 puntjes ernaast. Selecteer vervolgens Bewerken.
3. Selecteer in het voorbeeld van het formulier de tekst die je wilt bewerken.
4. Markeer in de teksteditor de tekst die je wilt opmaken.
5. Gebruik het lettertype-vervolgkeuzemenu in de teksteditor om je aangepaste lettertype en variatie te selecteren onder Jouw lettertypen.

1. Als je tevreden bent met je wijzigingen, klik je op Publiceren of inplannen.
2. Selecteer de optie Nu publiceren. Los eventuele blokkerende meldingen op en klik vervolgens op de knop Nu publiceren om je wijzigingen live te zetten.

This content requires Functional cookies to be enabled.

Update Cookie Settings

De invloed van Klaviyo.js op website-lettertypes

Klaviyo onsite tracking (Klaviyo.js) moet handmatig of via je e-commerce-integratie worden geïnstalleerd om aanmeldingsformulieren van Klaviyo op je website weer te geven. Klaviyo.js laadt Google- en geïmporteerde lettertypevarianten die zijn opgeslagen in je lettertypebibliotheek, evenals de stylesheet voor elk Adobe-webproject dat je hebt toegevoegd. Als je website dezelfde lettertypefamilie gebruikt, kunnen deze definities het uiterlijk beïnvloeden, bijvoorbeeld de dikte van een koptekst.

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

• Verwijder de relevante lettertypes uit je lettertypebibliotheek van Klaviyo. Formulieren die deze lettertypes gebruiken, geven hun reservelettertypes weer wanneer de verwijderde lettertypes niet meer kunnen laden.
• Werk de CSS- en fontdefinities van je website bij zodat ze niet conflicteren met de fontfamilies, diktes en stijlen die door Klaviyo.js worden geladen.

Extra hulpbronnen