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 den här artikeln får du också läsa mer om avvägningarna 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-postinkorgar som har stöd för anpassade teckensnitt, och att många populära klienter (som Gmail och Yahoo) inte har det.

This content requires Functional cookies to be enabled.

Update Cookie Settings

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. Klaviyo 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 (standardappen 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. Välj ett textblock i din mall eller öppna mallens inställningar för Stilar.
2. I rullgardinsmenyn för teckensnitt klickar du på Redigera standardteckensnitt. I panelen Teckensnitt klickar du på Lägg till teckensnitt.
3. I modalrutan som visas väljer du Google Fonts, Adobe Fonts eller Importera teckensnitt, beroende på var ditt teckensnitt kommer ifrån.
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.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Hantera anpassade teckensnitt

Du kan redigera eller ta bort dina anpassade teckensnitt i Innehåll > Media och varumärke under Varumärke.

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. Navigera till Innehåll > Media och varumärke i Klaviyo.
2. Öppna fliken Varumärke och välj sedan Teckensnitt. Om din flik Varumärke i stället visar Stil öppnar du den och letar upp avsnittet Teckensnitt.
3. Leta reda på det teckensnitt du vill redigera i avsnittet Teckensnitt.
4. Klicka på menyn med tre punkter bredvid teckensnittet.
5. Klicka på Redigera i den meny som visas.
6. För ett Google-teckensnitt öppnar du Variationer och väljer de ytterligare variationer som du vill använda.
7. För ett importerat teckensnitt klickar du på Lägg till variation och anger sedan dess Källwebbadress samt väljer dess Teckensnittsvikt och Teckensnittsstil. Upprepa för varje variation du vill lägga till.
8. Klicka på Spara.

Du kan inte lägga till variationer i ett Adobe-teckensnitt i Klaviyo eftersom dess variationer kommer från din Typekit-länk. Du kan redigera dess reservteckensnitt i Klaviyo.

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

Om du tar bort ett anpassat teckensnitt påverkar det innehåll som använder det, inklusive andra mallar och registreringsformulär. Det innehållet använder då sitt reservteckensnitt när det anpassade teckensnittet inte längre är tillgängligt. Om du lägger till samma teckensnittsfamilj och variationer på nytt blir det tillgängligt igen för innehåll som fortfarande använder det.

1. Navigera till Innehåll > Media och varumärke i Klaviyo.
2. Öppna fliken Varumärke och välj sedan Teckensnitt. Om din flik Varumärke i stället visar Stil öppnar du den och letar upp avsnittet Teckensnitt.
3. Leta reda på det teckensnitt du vill ta bort i avsnittet Teckensnitt.
4. Klicka på menyn med tre punkter bredvid teckensnittet.
5. Klicka på Ta bort i menyn som visas.
6. Klicka på Ta bort igen i bekräftelsedialogrutan.

Lägga till ett Google-teckensnitt

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

1. Öppna Teckensnittsnamn, sök efter det Google-teckensnitt du vill ha och välj det.
2. Om du vill lägga till variationer som fet eller kursiv utökar du # font variants available och väljer de variationer du vill använda.
3. Välj ett reservteckensnitt.
4. 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. Välj Adobe Fonts i dialogrutan Lägg till teckensnitt om den inte redan är vald.
2. Klistra in webbadressen till ditt Adobe-webbprojekt i CSS-adress. Använd formatet https://use.typekit.net/abcdefg.css.
3. Klicka på Fortsätt för att läsa in teckensnitten i projektet.
4. Välj ett reservteckensnitt för varje teckensnitt som inte redan har lagts till.
5. 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 har hostat teckensnittet öppnar du Importera teckensnitt i dialogrutan Lägg till teckensnitt och klistrar in teckensnittsfilens direkta URL i Källadress. URL:en måste peka på en .woff-, .woff2-, .ttf- eller .eot -fil.
3. Lägg till namn, vikt och stil för ditt teckensnitt i lämpliga fält.
4. Om du vill lägga till en till variation klickar du på Lägg till teckensnittsvariation och anger dess källadress, vikt och stil. Använd en annan webbadress för teckensnittsfilen och en vikt-/stilkombination för varje variation.
5. Välj ett reservteckensnitt.
6. 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 ditt anpassade teckensnitt 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 din e-post i en e-postklient 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 e-postklient 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
• Till en specifik 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.

För tabell- och delningsblock väljer du texten i e-postarbetsytan för att redigera den och använda ditt anpassade teckensnitt.

Förhandsgranska dina anpassade teckensnitt

När din mall är klar klickar du på Förhandsgranska, anger din e-postadress i sidofältet för förhandsvisning och klickar på 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 på en större mängd olika enheter.

Ytterligare resurser

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