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.
Een mooi ontworpen aanmeldingsformulier is essentieel om ze te overtuigen om het doel van je formulier te voltooien. Als je merk lettertypen gebruikt die niet standaard beschikbaar zijn in de editor voor aanmeldingsformulieren, is het toevoegen van deze aangepaste lettertypen een eenvoudige manier om je formulieren er consistent uit te laten zien met de rest van je site. Nadat je je lettertypen hebt toegevoegd, kun je je lettertype gebruiken om je aanmeldingsformulieren aan te passen zoals je wilt.
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
Navigeer in het hoofdmenu aan de linkerkant naar Content > Afbeeldingen & merk. Klik vervolgens op het tabblad Lettertypen. Je kunt een Google-lettertype, Adobe-lettertype of een geïmporteerd lettertype toevoegen.
Als je een aangepast lettertype aan Klaviyo toevoegt dat al op je site wordt gebruikt, upload dan precies de lettertypestijl (bijv. licht, vet of cursief) en -dikte (bijv. 400) die je site momenteel gebruikt. Als je een lettertype uploadt en een stijl of dikte selecteert die iets afwijkt, kunnen de stijlen die in Klaviyo zijn geselecteerd sommige van de bestaande lettertypestijlen van je site overschrijven.
Een Google-lettertype toevoegen
Een Google-lettertype toevoegen:
- Selecteer de dropdown Lettertypenaam om een lijst te zien van alle beschikbare Google-lettertypen, behalve de lettertypen die je al in je account hebt geladen.
- Kies het gewenste lettertype. Na het selecteren zie je onder de dropdown een voorbeeld van het lettertype, evenals het aantal mogelijke variaties (bijv. vet, cursief, enz.).
- Als je meer dan 1 variatie wilt toevoegen, klik je op de pijl naast het aantal mogelijke variaties en kies je de lettertypen die je wilt toevoegen.
- Selecteer een reservelettertype.
- Klik op Lettertype toevoegen. Je toegevoegde lettertype wordt nu weergegeven in de sectie Je lettertypen onderaan de pagina.
In de sectie Je lettertypen kun je de lettertypen zien die je aan je account hebt toegevoegd. Als je een van je lettertypen in deze sectie wilt bewerken of verwijderen, selecteer je de drie puntjes bij het lettertype.
Houd er in het kader van de AVG rekening mee dat Google Fonts worden gehost door Google. Als je een Google-lettertype in je bibliotheek met lettertypen opneemt, gebruik je het Google-lettertype. Klaviyo heeft een selectie aangepaste lettertypen die we gebruiken in onze templates voor aanmeldingsformulieren, die je eenvoudig kunt importeren en gebruiken. Bekijk de lijst met door Klaviyo gehoste lettertypen.
Een Adobe-lettertype toevoegen
Je hebt een Adobe-account nodig om Adobe Fonts te gebruiken.
Een Adobe-lettertype toevoegen:
- Ga naar Adobe Fonts.
- Zoek je Adobe Fonts-link en selecteer vervolgens je lettertype.
- Klik naast de naam van je lettertype op het codepictogram.
- Voer indien nodig een nieuwe projectnaam in en klik daarna op Opslaan.
- Kopieer in het volgende modale venster de https://use.typekit.net-URL voor het lettertype dat je wilt toevoegen. Neem de .css niet op als onderdeel van de URL wanneer je deze kopieert.
- Ga terug naar Klaviyo en plak de URL in het veld CSS-adres.
- Selecteer Doorgaan en kies daarna een Fallback-lettertype voor het lettertype dat je wilt uploaden. Let op: als een lettertype al beschikbaar is in je account, wordt er een groen vinkje naast het lettertype weergegeven en wordt het bestaande fallback-lettertype getoond.
- Selecteer Lettertype toevoegen.
Zodra je je lettertype hebt toegevoegd, wordt het onderaan de pagina weergegeven in de sectie Je lettertypen . Als je een van je lettertypen in deze sectie wilt bewerken, selecteer je de drie puntjes bij 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 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:
- Geef je lettertype een naam.
- Geef een font-weight, style en een bron-URL op. De bron-URL moet een geldige URL zijn die eindigt op WOFF, WOFF2, TTF, EOT of SVG.
- Optioneel: om extra variaties toe te voegen, selecteer je Lettertypevariatie toevoegen en herhaal je stap 2 voor deze variatie.
- Selecteer Lettertype toevoegen om dit lettertype toe te voegen aan de sectie Je lettertypen .
Via Je lettertypen 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 bij het lettertype te selecteren.
Een lettertype bewerken
Een bestaand aangepast lettertype bewerken:
- Navigeer naar Content > Afbeeldingen en merk > Lettertypen.
- Zoek het lettertype dat je wilt bewerken in het gedeelte Jouw lettertypen onderaan de pagina.
- Klik in de kaart van dat lettertype op de 3 stippen in de bovenhoek.
- Kies Bewerken. Vanaf hier kun je:
- Bewerk het fallback-lettertype voor elk aangepast lettertype.
- Alleen voor fonts die worden gehost door Google en Klaviyo: bewerk of voeg toe aan de geselecteerde variaties door # fontvariaties te selecteren om de lijst uit te vouwen en vervolgens alle fonts te selecteren die je wilt toevoegen.
Je kunt geen variaties toevoegen aan een Adobe-lettertype nadat je het hebt geüpload, omdat de variaties ingebouwd zijn in je Typekit-link. Om variaties aan een Adobe-lettertype toe te voegen, moet je het bestaande lettertype verwijderen en opnieuw toevoegen met een andere Typekit-link die alle variaties bevat die je wilt opnemen.
- Als je klaar bent met het bewerken van je lettertype, selecteer je Lettertype bijwerken.
Een lettertype verwijderen
Om een lettertype te verwijderen:
- Navigeer naar het gedeelte Je lettertypen .
- Klik bij het lettertype dat je wilt verwijderen op de 3 puntjes en kies vervolgens Verwijderen. Als je ervoor kiest om je lettertype te verwijderen, verschijnt er een venster waarin je wordt geïnformeerd dat, als je lettertype in formulieren wordt gebruikt, je fallback-lettertype wordt weergegeven nadat je je toegevoegde lettertype hebt verwijderd.
- Selecteer Verwijderen.
Zodra een aangepast lettertype is verwijderd, vallen alle formulieren in Klaviyo die momenteel het aangepaste lettertype gebruiken onmiddellijk terug op het back-up-lettertype. Als je het lettertype opnieuw toevoegt, gaan die 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:
- Ga naar het tabblad Aanmeldingsformulieren.
- Zoek het formulier dat je wilt bewerken en klik op de 3 puntjes ernaast, en selecteer vervolgens Formulier bewerken.
- Selecteer in het voorbeeld van het formulier de tekst die je wilt bewerken.
- Markeer in het menu Tekst aan de rechterkant de tekst.
- Gebruik de vervolgkeuzelijst met lettertypen bovenaan om je aangepaste lettertype te selecteren. Let op: lettertypen uit de sectie Jouw lettertypen van je account verschijnen bovenaan de lijst.
Tijdens het bewerken verschijnt je aangepaste lettertype op het canvas (bijv. het bewerkingsvoorbeeld), maar niet in het paneel aan de linkerkant. Het paneel aan de linkerkant toont je back-up-lettertype in plaats van het aangepaste lettertype.
- Als je tevreden bent met je wijzigingen, klik je op Publiceren om ze live te zetten.
De invloed van Klaviyo.js op website-lettertypes
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 wordt geïnjecteerd. Hierdoor kunnen de lettertypen op je site tijdens dit proces enigszins worden aangepast, zoals een verandering in het gewicht van de koptekst van de site.
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.
- 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.