Så lägger du till egna teckensnitt i e-postmallar

Du kommer att lära dig

Lär dig hur du lägger till nya teckensnitt i Klaviyos e-postmallredigerare så att dina e-postmeddelanden matchar din varumärkesstil. I denna artikel får du också läsa mer om vilka avvägningar som måste göras när du använder anpassade teckensnitt och hur du väljer ett teckensnitt som stöds av så många olika inkorgar som möjligt. 

Du kan använda Google Fonts, Adobe Typekit eller importerade (alltså själv-hostade) teckensnitt i dina e-postmeddelanden. Tänk dock på att det bara är vissa e-postbrevlådor som har stöd för anpassade teckensnitt, och att många populära klienter (som Gmail och Yahoo) inte har det. 

Nyckelbegrepp

• Anpassat teckensnitt
  Teckensnitt som inte tillhandahålls som standard i Klaviyo-redigeraren 
• Webbteckensnitt
  Ett anpassat teckensnitt som måste läsas in från en extern källa 
• Webbsäkert teckensnitt
  Ett teckensnitt som lagras lokalt på de flesta enheter och som därför inte behöver läsas in från en extern källa för att kunna visas 
• Reservteckensnitt
  Ett webbsäkert teckensnitt som används i inkorgar som inte har stöd för ditt anpassade teckensnitt

Stöd och begränsningar för anpassade teckensnitt

Anpassade teckensnitt kan hjälpa dig att göra din marknadsföring enhetlig och anpassa innehållet i dina e-postmeddelanden efter din e-handelswebbplats. Webbteckensnitt (alltså teckensnitt som läses in från en extern källa och inte är tillgängliga från enhetslagringen) kanske inte återges som förväntat på alla enheter eller e-postklienter. Klaviyos standardteckensnitt är förinstallerade på de allra flesta datorer och enheter, så att du kan leverera en enhetlig upplevelse för alla prenumeranter. 

E-postklienter som har stöd för webbteckensnitt är till exempel:

• Apple Mail
• iOS Mail (standardwebbläsaren för e-post på iOS)
• Google Android (förutom Android 2.3 som inte har stöd för @import-metoden som används av Google- och Adobe-teckensnitt)
• Samsung Mail (Android 8.0)
• Outlook för Mac

Anpassade teckensnitt i Gmail och andra inkorgar som inte har stöd

Dina mottagare som använder Gmail (eller andra inkorgar som inte har stöd för anpassade teckensnitt) kan se ditt reservteckensnitt (som du kan ställa in i din e-postmall) istället för det anpassade teckensnitt du väljer. För att undvika detta kan du överväga att välja ett webbsäkert anpassat teckensnitt som finns tillgängligt på de flesta enheter oavsett huruvida de har stöd för webbteckensnitt. 

Du hittar webbsäkra teckensnitt här tillsammans med information om stöd från olika enheter. 

Lägg till ett nytt anpassat teckensnitt i e-postmallredigeraren 

Gör så här för att lägga till ett anpassat teckensnitt till en e-postmall: 

1. Öppna ett textblock i din mall eller mallens stilflik.
2. I teckensnittsmenyn klickar du på Lägg till teckensnitt längst ned i rullgardinsmenyn.
3. I modalrutan som visas väljer du Google Font, Adobe Font eller Importera teckensnitt, beroende på källan till ditt teckensnitt.
4. Följ instruktionerna i avsnitten nedan för din teckensnittstyp (Google, Adobe eller importerade teckensnitt).

När du har lagt till ett teckensnitt i dina e-postmallar kommer det att bli tillgängligt för alla andra mallar samt ditt registreringsformulär.

Lägg till ytterligare teckensnittsvariationer till ett befintligt anpassat teckensnitt

Du kan alltid redigera, ta bort eller uppdatera den valda variationen för dina anpassade teckensnitt under Varumärke och bilder > Teckensnitt.

Uppdatera ett befintligt teckensnitt

Gör så här för att välja ytterligare variationer för ett anpassat Google-teckensnitt eller ett importerat teckensnitt som du redan har lagt till: 

1. Gå till Innehåll > Bilder och varumärke i Klaviyo.
2. Klicka på Teckensnitt.
3. Leta reda på det teckensnitt du vill redigera under Dina teckensnitt. 
4. Klicka på de tre prickarna uppe till höger på detta teckensnitts kort.
5. Klicka på Redigera i den meny som visas. 
6. Klicka på # teckensnittsvariation vald för att expandera listan över teckensnittsvariationer. 
7. Välj eventuella ytterligare variationer du vill lägga till.
8. Klicka på Uppdatera teckensnitt.

Du kan inte lägga till variationer i ett Adobe-teckensnitt efter att du har laddat upp det, eftersom variationer är inbyggda i din Typekit-länk.   

Om du får felmeddelandet Ett teckensnitt med det här namnet finns redan ska du följa stegen ovan för att redigera den befintliga versionen av teckensnittet istället för att lägga till det på nytt. 

Ta bort ett teckensnitt

1. Gå till Innehåll > Bilder och varumärke i Klaviyo.
2. Klicka på Teckensnitt.
3. Leta reda på det teckensnitt du vill redigera under Dina teckensnitt. 
4. Klicka på de tre prickarna uppe till höger på detta teckensnitts kort.
5. Klicka på Ta bort i menyn som visas. 

Eventuella meddelanden i Klaviyo som för närvarande använder det anpassade teckensnittet kommer omedelbart att återgå till reservteckensnittet. Om du lägger till teckensnittet igen kommer dessa e-postmeddelanden att börja använda det igen. 

Lägga till ett Google-teckensnitt

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

1. Skriv namnet på det Google-teckensnitt du vill använda.
2. Välj ett reservteckensnitt.
3. Klicka på Lägg till teckensnitt. 

Lägga till ett Adobe-teckensnitt

Adobe-teckensnitt är endast tillgängliga för användare som har en aktiv prenumeration på Adobe-teckensnitt. Gör så här för att lägga till ett Adobe-teckensnitt:

1. Klicka på Adobe-teckensnitt.
2. Klistra in din CSS-adress. Adressen ska ha detta format: https://use.typekit.com/123ABC.
3. Välj ett reservteckensnitt.
4. Klicka på Lägg till teckensnitt. 

Lägga till ett importerat teckensnitt

Importerade teckensnitt, ibland kallade själv-hostade teckensnitt, rekommenderas endast för avsändare som har tillgång till en utvecklare. Du kan inte ladda upp teckensnittsfilen direkt till Klaviyo. Om du inte har tillgång till ett utvecklingsteam rekommenderar vi att du hittar ett Google- eller Adobe-teckensnitt som liknar det önskade teckensnittet. 

Gör så här för att använda ett importerat teckensnitt:

1. Du kan använda dina servrar som värd för teckensnittet eller använda en värdtjänst för teckensnitt. Se till att aktivera CORS (Cross-Origin Resource Sharing) genom att ställa in Access-Control-Allow-Origin-rubriken till *, så att teckensnittet kan nås av dina mottagares inkorgar. Läs mer om CORS.
2. När du sparat ner teckensnittet klickar du på Importera teckensnitt i Lägg till teckensnitt-modalen och klistrar in din värd-URL i fältet Källadress.
3. Lägg till namn, vikt och stil för ditt teckensnitt i lämpliga fält.
4. Välj ett reservteckensnitt.
5. Klicka på Lägg till teckensnitt. 

Om reservteckensnitt

För alla typer av anpassade teckensnitt måste du välja ett reservteckensnitt. Detta teckensnitt visas för de mottagare som har klienter som saknar stöd för ditt anpassade teckensnitt. Välj ett teckensnitt i listan med tillgängliga alternativ som liknar det egna teckensnittet i stil. 

Om du till exempel använder Poppins (ett Google-teckensnitt) som ditt anpassade teckensnitt och Arial som ditt reservteckensnitt kommer e-postmottagare att se följande teckensnitt: 

• Mottagare som öppnar dina e-postmeddelanden i en webbläsare som har stöd för webbteckensnitt (till exempel Apple Mail, iOS Mail) kommer att se Poppins 
• Mottagare som öppnar dina e-postmeddelanden i en webbläsare som inte har stöd för webbteckensnitt (till exempel Gmail) kommer att se Arial

Tillämpa ett anpassat teckensnitt

När du har skapat ett anpassat teckensnitt kan du använda det för all text i din mall, inklusive: 

• I dina viktigaste mallstilar 
• I alla blocks stilar 
• För ett specifikt stycke text i ett textblock 
• Till knappblock, produktblock och alla andra blocktyper som innehåller text 

Så här använder du ett anpassat teckensnitt i ett textblock:

1. Markera det textblock som innehåller den text som du vill använda teckensnittet på.
2. Markera den specifika text som du vill använda teckensnittet på.
3. Välj det anpassade teckensnittet i rullgardinsmenyn. 

För alla andra blocktyper, eller för block- och mall-stilar, ska du välja teckensnittet i lämplig rullgardinsmeny.

I tabellblock och delningsblock visas det anpassade teckensnittet i Canvas (till exempel redigeringsförhandsgranskningen), men inte i panelen till vänster. I panelen till vänster visas ditt reservteckensnitt i stället för det anpassade teckensnittet. 

Förhandsgranska dina anpassade teckensnitt 

När din mall är klar kan du skicka ett förhandsgransknings-e-postmeddelande genom att klicka på Förhandsgranska och testa > Skicka Test. Testa att öppna meddelandet på olika enheter för att se hur det ser ut för olika mottagare. Du kan också använda ett verktyg som Email on Acid för att förhandsgranska för en större mängd olika enheter. 

Ytterligare resurser

• Guide till redigeraren för e-postmallar
• Förstå teckensnitt i e-post