Dodawanie czcionek niestandardowych w szablonach e-mailowych

Czego się dowiesz?

Nauczysz się, jak dodawać do edytora szablonów e-mailowych Klaviyo nowe czcionki, co pozwoli Ci zachować zgodność wyglądu wiadomości ze stylem Twojej marki. W tym artykule opowiadamy także o kompromisach związanych z używaniem czcionek niestandardowych oraz o tym, jak wybrać czcionkę obsługiwaną przez jak najwięcej skrzynek e-mailowych. 

W swoich e-mailach możesz używać czcionek Google Fonts, Adobe Typekit lub importowanych (czyli hostowanych samodzielnie). Należy jednak pamiętać, że tylko niektóre skrzynki e-mailowe obsługują czcionki niestandardowe, a wiele popularnych klientów (takich jak Gmail i Yahoo) tego nie robi. 

Kluczowe terminy

• Czcionka niestandardowa
  Dowolna czcionka, która nie jest domyślnie dostępna w edytorze Klaviyo 
• Czcionka internetowa
  Czcionka niestandardowa, którą należy zaimportować z zewnętrznego źródła 
• Bezpieczna czcionka internetowa
  Czcionka, która jest przechowywana lokalnie na większości urządzeń, a zatem w celu jej wyświetlania nie trzeba jej importować z zewnętrznego źródła 
• Czcionka zastępcza
  Bezpieczna czcionka internetowa używana przez skrzynki e-mailowe wtedy, gdy nie obsługują Twojej czcionki niestandardowej

Obsługa czcionek niestandardowych i dotyczące ich ograniczenia

Czcionki niestandardowe mogą pomóc Ci zachować spójność marketingu, ponieważ dzięki nim można dostosować treść e-maila do swojej strony internetowej. Czcionki internetowe (czyli czcionki ładowane ze źródła zewnętrznego, a nie dostępne w pamięci urządzenia) mogą jednak nie wyświetlać się zgodnie z oczekiwaniami na wszystkich urządzeniach lub we wszystkich klientach poczty e-mail. Domyślne czcionki Klaviyo są wstępnie zainstalowane na większości komputerów i urządzeń, dzięki czemu wszyscy subskrybenci i subskrybentki zobaczą spójny wygląd wiadomości. 

Klienty poczty e-mail, którzy obsługują czcionki internetowe, to m.in.:

• Apple Mail
• iOS Mail (domyślny klient poczty e-mail w systemie iOS)
• Google Android (z wyjątkiem systemu Android 2.3, który nie obsługuje metody @import używanej przez czcionki Google i Adobe)
• Samsung Mail (Android 8.0)
• Outlook na komputerach Mac

Czcionki niestandardowe w Gmailu i innych nieobsługiwanych skrzynkach e-mail

Możliwe, że zamiast wybranej czcionki niestandardowej odbiorcy korzystający z Gmaila (lub innych skrzynek odbiorczych, które nie obsługują czcionek niestandardowych) zobaczą czcionkę zastępczą, którą można ustawić w szablonie e-mailowym. Aby tego uniknąć, zastanów się, czy nie lepiej wybrać bezpieczną niestandardową czcionkę internetową, która jest dostępna na większości urządzeń niezależnie od tego, czy obsługują one czcionki internetowe. 

Tutaj znajdziesz bezpieczne czcionki internetowe wraz ze wskazaniem, które urządzenia je obsługują. 

Dodawanie do edytora szablonów e-mailowych nowej czcionki niestandardowej 

Aby dodać do szablonu e-mailowego czcionkę niestandardową: 

1. W szablonie lub w karcie szablonu Style otwórz blok tekstowy.
2. U dołu menu rozwijanego czcionek kliknij Dodaj czcionkę.
3. W wyświetlonym oknie wybierz Google Font, Adobe Font lub Importuj czcionkę, w zależności od źródła swojej czcionki.
4. Postępuj zgodnie z poniższą instrukcją dla danego typu czcionki (Google, Adobe lub czcionki importowane).

Po dodaniu do szablonu e-mailowego czcionki będzie ona dostępna we wszystkich pozostałych szablonach, a także w formularzach rejestracyjnych.

Dodawanie kolejnych wariantów do istniejącej czcionki niestandardowej

Wybrane warianty czcionek niestandardowych można edytować, usuwać lub aktualizować w menu Marka i obrazy > Czcionki.

Aktualizacja istniejącej czcionki

Aby wybrać dodatkowy wariant dla niestandardowej czcionki Google lub dodanej już czcionki zaimportowanej: 

1. Przejdź w Klaviyo do: Treści > Obrazy i branding.
2. Kliknij Czcionki.
3. W sekcji Twoje czcionki znajdź tę, którą chcesz edytować. 
4. Na karcie tej czcionki kliknij trzy kropki w prawym górnym rogu.
5. W wyświetlonym menu kliknij Edytuj. 
6. Kliknij liczbę wybranych czcionek i rozwiń listę wariantów czcionek. 
7. Wybierz dowolny dodatkowy wariant, który chcesz dodać.
8. Kliknij Zaktualizuj czcionkę.

Po przesłaniu czcionki Adobe nie można dodać do niej wariantu, ponieważ warianty są wbudowane w Twoje łącze Typekit.   

Jeśli pojawi się komunikat o błędzie Czcionka o tej nazwie już istnieje, zamiast dodawać czcionkę ponownie, wykonaj powyższe kroki, aby edytować jej istniejącą wersję. 

Usuwanie czcionki

1. Przejdź w Klaviyo do: Treści > Obrazy i branding.
2. Kliknij Czcionki.
3. W sekcji Twoje czcionki znajdź tę, którą chcesz edytować. 
4. Na karcie tej czcionki kliknij trzy kropki w prawym górnym rogu.
5. W wyświetlonym menu kliknij Usuń. 

Wszelkie wiadomości w Klaviyo, w których obecnie używane są czcionki niestandardowe, natychmiast powrócą do używania czcionki zastępczej. Jeśli dodasz czcionkę ponownie, w e-mailach zacznie ona być używana na nowo. 

Dodawanie czcionki Google

Aby dodać czcionkę Google:

1. Wpisz nazwę czcionki Google, której chcesz użyć.
2. Wybierz czcionkę zastępczą.
3. Kliknij Dodaj czcionkę. 

Dodawanie czcionki Adobe

Czcionki Adobe są dostępne tylko dla użytkowników posiadających aktywną subskrypcję Adobe Fonts. Aby dodać czcionkę Adobe:

1. Kliknij Adobe Font.
2. Wklej swój adres CSS. Adres powinien mieć następujący format: https://use.typekit.com/123ABC.
3. Wybierz czcionkę zastępczą.
4. Kliknij Dodaj czcionkę. 

Dodawanie importowanej czcionki

Importowane czcionki, czasami nazywane czcionkami hostowanymi samodzielnie, są zalecane tylko dla nadawców, którzy mogą liczyć na pomoc programisty. Pliku czcionki nie można przesłać do Klaviyo bezpośrednio. Jeśli nie masz dostępu do zespołu programistycznego, najlepiej znaleźć czcionkę Google lub Adobe podobną do interesującej Cię czcionki. 

Aby użyć zaimportowanej czcionki:

1. Hostuj czcionkę na swoich serwerach lub za pomocą usługi hostingu czcionek. Pamiętaj o włączeniu mechanizmu bezpieczeństwa Cross-Origin Resource Sharing (CORS) – aby czcionka była dostępna dla skrzynek odbiorczych odbiorców, nagłówek Access-Control-Allow-Origin ustaw na *. Dowiedz się więcej o CORS.
2. Po pomyślnym zahostowaniu czcionki kliknij Importuj czcionkę w oknie dialogowym Dodaj czcionkę i wklej adres URL hostingu w polu Adres źródłowy.
3. Dodaj do odpowiednich pól nazwę, grubość i styl czcionki.
4. Wybierz czcionkę zastępczą.
5. Kliknij Dodaj czcionkę. 

Informacje o czcionkach zastępczych

W przypadku wszystkich typów czcionek niestandardowych należy wybrać czcionkę zastępczą. Pojawi się ona u odbiorców i odbiorczyń korzystających z klientów poczty, które nie obsługują Twojej czcionki niestandardowej. Z listy dostępnych opcji czcionek wybierz taką, która stylem przypomina Twoją czcionkę niestandardową. 

Na przykład jeśli jako czcionki niestandardowej użyjesz Poppins (czcionka Google), a jako czcionki zastępczej Arial, odbiorcy e-maili zobaczą następujące czcionki: 

• Osoby, które otworzą e-mail w kliencie poczty obsługującym czcionki internetowe (np. Apple Mail, iOS Mail), zobaczą czcionkę Poppins. 
• Osoby, które otworzą e-mail w kliencie poczty nieobsługującym czcionek internetowych (np. Gmail), zobaczą czcionkę Arial.

Stosowanie czcionki niestandardowej

Po skonfigurowaniu czcionki niestandardowej można ją zastosować w dowolnym tekście szablonu, m.in. w : 

• głównych stylach szablonów; 
• każdym stylu bloku; 
• określonym fragmencie tekstu w bloku tekstowym; 
• blokach przycisków, blokach produktów i innych typach bloków zawierających tekst. 

Aby zastosować czcionkę niestandardową w bloku tekstowym:

1. Wybierz blok tekstowy zawierający tekst, do którego chcesz zastosować czcionkę.
2. Zaznacz określony tekst, do którego chcesz zastosować czcionkę.
3. Wybierz czcionkę niestandardową z listy rozwijanej. 

W przypadku wszystkich innych typów bloków lub stylów bloków i szablonów czcionkę wybierz z odpowiedniego menu rozwijanego.

W blokach tabel i blokach podziału Twoja czcionka niestandardowa pojawi się w obszarze roboczym (np. w podglądzie edycji), ale nie w panelu po lewej stronie. Tam zamiast czcionki niestandardowej wyświetlana będzie czcionka zastępcza. 

Podgląd czcionek niestandardowych 

Gdy szablon będzie gotowy, wyślij do siebie e-mail poglądowy, klikając przycisk Wyświetl podgląd i testuj > Wyślij test. Spróbuj otworzyć wiadomość na różnych urządzeniach, aby zobaczyć, jak będzie wyglądać u różnych odbiorców. Możesz także użyć narzędzia takiego jak Email on Acid, aby wyświetlić podgląd na szerszej gamie urządzeń. 

Dodatkowe źródła

• Przewodnik po edytorze szablonów e-mailowych
• Informacje o czcionkach w e-mailach