Så här använder du anpassade teckensnitt i registreringsformulär

Du kommer att lära dig

Lär dig hur du utformar ditt registreringsformulär med anpassade teckensnitt så att din kund upplever en stark varumärkesidentitet och överensstämmelse med resten av din webbplats.

Att skapa ett vackert utformat registreringsformulär är avgörande för att tvinga dem att följa upp målet med ditt formulär. Om ditt varumärke använder teckensnitt som inte finns tillgängliga i redigeraren för registreringsformulär är det enkelt att lägga till dessa anpassade teckensnitt för att få formulären att se enhetliga ut med resten av webbplatsen. När du har lagt till dina teckensnitt kan du använda ditt teckensnitt för att anpassa ditt registreringsformulär som du vill.

Nyckelbegrepp

• Anpassat teckensnitt
  Alla teckensnitt som inte tillhandahålls som standard i Klaviyo-redigeraren. Detta ingår:
  • Googles teckensnitt
  • Adobe-teckensnitt
  • Importerade teckensnitt
• Webbsäkert teckensnitt
  Ett typsnitt som lagras lokalt på de flesta enheter och som därför inte behöver laddas från en extern källa för att visas.
• Reservteckensnitt
  Ett webbsäkert teckensnitt som används om en sida inte kan läsa in det primära teckensnittet.

Lägga till egna teckensnitt på din Konto

Gå till huvudmenyn på vänster sida och navigera till Content > Images & Brand. Klicka sedan på fliken Fonts. Du kan lägga till ett Google-teckensnitt, Adobe-teckensnitt eller ett importerat teckensnitt.

Lägga till ett Google-teckensnitt

Så här lägger du till ett Google-teckensnitt:

1. Välj rullgardinsmenyn Font name för att se en lista över alla tillgängliga Google-teckensnitt, förutom de teckensnitt som du redan har laddat i din Konto.
2. Välj önskat teckensnitt. När du väljer visas en förhandsgranskning av teckensnittet under rullgardinsmenyn, samt antalet möjliga variationer (t.ex. fet, kursiv osv.).
   • Om du vill lägga till fler än en variant klickar du på pilen bredvid antalet möjliga varianter och väljer de teckensnitt som du vill lägga till.
3. Välj ett reservteckensnitt.
4. Klicka på Lägg till teckensnitt. Det teckensnitt du har lagt till visas nu i avsnittet Dina teckensnitt längst ned på sidan.

I avsnittet Your Fonts kan du se de teckensnitt som du har lagt till på din Konto. Om du vill redigera eller ta bort något av dina teckensnitt i det här avsnittet väljer du de tre prickarna på teckensnittet.

Lägga till ett Adobe-typsnitt

Gör så här för att lägga till ett Adobe-teckensnitt:

1. Navigera till Adobe Fonts.
2. Sök efter länken till ditt Adobe-teckensnitt och välj sedan ditt teckensnitt.
3. Klicka på kodikonen bredvid teckensnittsnamnet.
4. Ange ett nytt projektnamn om det behövs och klicka sedan på Spara.
5. I nästa modal kopierar du https://use.typekit.net URL för det teckensnitt som du vill lägga till. Inkludera inte .css som en del av webbadressen när du kopierar den.
   
6. Navigera tillbaka till Klaviyo och klistra in URL:en i CSS-adressfältet.
7. Välj Continue och välj sedan ett Fallback-teckensnitt för det teckensnitt som du vill ladda upp. Observera att om ett teckensnitt redan finns tillgängligt i ditt Konto visas en grön bock bredvid teckensnittet och dess befintliga reservteckensnitt visas.
   
8. Välj Lägg till teckensnitt.

När du har lagt till ditt teckensnitt visas det i avsnittet Dina teckensnitt längst ner på sidan. Om du vill redigera något av dina teckensnitt i det här avsnittet väljer du de tre prickarna på teckensnittet.

Lägga till ett importerat teckensnitt

Om du har köpt eller laddat ner ett anpassat typsnitt som inte finns hos en tredjepartskälla kan du fortfarande använda det i ett Klaviyo-formulär. Först ska du hosta teckensnittsfilerna på en plats som är tillgänglig för Klaviyo (till exempel i din webbplats tillgångar eller på en plattform för teckensnittshosting). Se till att aktivera CORS (Cross-Origin Resource Sharing) genom att ställa in rubriken Access-Control-Allow-Origin till *, så att teckensnittet kan nås av dina mottagares enheter.

Så här lägger du till ett importerat teckensnitt:

1. Namnge ditt typsnitt.
2. Ange en typsnittsvikt, stil och en käll-URL. Källadressen måste vara en giltig URL som slutar på WOFF, WOFF2, TTF, EOT eller SVG.
3. Valfritt: Om du vill lägga till ytterligare variation väljer du Lägg till fontvariation och upprepar sedan steg 2 för denna variation.
4. Välj Lägg till teckensnitt för att lägga till teckensnittet i avsnittet Dina teck ensnitt.

Under Your Fonts kan du se de teckensnitt som du har importerat till din Konto. Du kan också ta bort eller redigera dina teckensnitt genom att välja de 3 prickarna på teckensnittet.

Redigera ett teckensnitt

Så här redigerar du ett befintligt anpassat teckensnitt:

1. Navigera till Innehåll > Bilder & varumärke > Typsnitt.
2. Leta reda på det teckensnitt du vill redigera i avsnittet Dina teckensnitt längst ner på sidan.
3. Klicka på de 3 prickarna i det övre hörnet på det teckensnittets kort.
4. Välj Redigera. Härifrån kommer du att kunna:
   • Redigera reservteckensnittet för alla anpassade teckensnitt. 
   • Endast för Google och Klaviyo-hostade typsnitt, redigera eller lägg till den valda varianten genom att välja # of font variation för att expandera listan och sedan välja de typsnitt du vill lägga till.
     
     

     Du kan inte lägga till variation i Adobe-typsnitt efter att du har laddat upp det eftersom variationen är inbyggd i din Typekit-länk. Om du vill lägga till variation i ett Adobe-typsnitt måste du ta bort det befintliga typsnittet och lägga till det igen med en annan Typekit-länk som har all variation du vill inkludera.

5. När du är klar med att redigera ditt typsnitt väljer du uppdatera typsnitt.

Ta bort ett teckensnitt

Radera ett teckensnitt:

1. Navigera till avsnittet Your Fonts (Dina teckensnitt ).
2. Klicka på de tre prickarna på det teckensnitt som du vill ta bort och välj sedan Ta bort. Om du väljer att ta bort ditt teckensnitt visas en modal som meddelar dig att om ditt teckensnitt används i något formulär kommer ditt reservteckensnitt att visas efter att du har tagit bort ditt tillagda teckensnitt.
   
3. Välj Ta bort.

När ett anpassat teckensnitt har tagits bort kommer alla formulär i Klaviyo som för närvarande använder det anpassade teckensnittet omedelbart att återgå till reservteckensnittet. Om du lägger till teckensnittet igen kommer dessa formulär att börja använda det igen. 

Använda anpassade teckensnitt i registreringsformuläret

Om du vill använda ditt anpassade teckensnitt i ett registreringsformulär redigerar du helt enkelt texten i förhandsgranskningen av formuläret:

1. Navigera till fliken registreringsformulär.
2. Leta reda på det formulär du vill redigera och klicka på de tre prickarna bredvid det och välj sedan Redigera formulär.
3. Markera den text som du vill redigera i förhandsgranskningen av formuläret. 
4. Markera texten i textmenyn till höger.
5. Använd rullgardinsmenyn för typsnitt högst upp för att välja ditt eget typsnitt. Observera att teckensnitt från avsnittet Dina teck ensnitt i din Konto visas högst upp i listan. 
   

   När du redigerar visas det anpassade teckensnittet i Canvas (t.ex. förhandsgranskningen av redigeringen), men inte i panelen på vänster sida. I panelen till vänster visas ditt reservtypsnitt i stället för det anpassade typsnittet.

6. När du är nöjd med dina ändringar klickar du på Publicera för att få dem att börja gälla.

Webbplatsens teckensnitt påverkas av Klaviyo.js

Klaviyos aktiva spårning på webbplatsen (Klaviyo.js), måste installeras manuellt eller via din e-handelsintegration för att kunna publicera Klaviyo-registreringsformulär på din webbplats. Om du bara har laddat upp vissa teckensnittsvariationer, laddar Klaviyo.js automatiskt resten av variationerna i ditt bibliotek när det injiceras på din webbplats. På grund av detta kan teckensnitten på din webbplats ändras något i processen, till exempel att vikten på sidans rubrik kan justeras. 

Det finns två alternativ för att hantera eventuella ändringar som Klaviyo.js gör i dina teckensnitt. Du kan antingen:

• Ta bort de relevanta teckensnitten från ditt Klaviyos bibliotek med teckensnitt. 
• Uppdatera CSS i sidhuvudet på din webbplats så att det inte skrivs över när Klaviyo.js läser in de extra variationerna. 
  

  Eftersom det här alternativet kräver djupgående kunskaper om CSS kan du behöva hjälp av en utvecklare. Klaviyo kan tyvärr inte hjälpa till med att justera CSS för din webbplats, men vi har ett stort partnernätverk.

Ytterligare resurser 

• Kurs: Skapa en effektiv förvärvsstrategi med hjälp av registreringsformulär
• Så här hostar du ett anpassat teckensnitt på din webbplats