Dodawanie niestandardowych czcionek w szablonach e-mailowych

Czego się dowiesz?

Dowiesz się, jak dodać nowe czcionki do edytora szablonów e-maili w Klaviyo, aby wiadomości były zgodne ze stylem Twojej marki. Ten artykuł opowie także o kompromisach związanych z używaniem niestandardowych czcionek oraz o tym, jak wybrać czcionkę obsługiwaną przez jak najwięcej skrzynek e-mail. 

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-mail obsługują niestandardowe czcionki, 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
  Niestandardowa czcionka, która musi zostać zaimportowana z zewnętrznego źródła. 
• Bezpieczna czcionka internetowa
  Czcionka, która jest przechowywana lokalnie na większości urządzeń, a zatem nie musi być importowana z zewnętrznego źródła w celu jej wyświetlenia. 
• Czcionka zastępcza
  Bezpieczna czcionka internetowa używana przez skrzynki e-mail wtedy, gdy nie będą obsługiwać Twojej czcionki niestandardowej.

Obsługa i ograniczenia czcionek niestandardowych

Czcionki niestandardowe mogą pomóc w utrzymaniu spójności marketingu, dostosowując treść e-maili do Twojej witryny internetowej. Jednak czcionki internetowe (czyli czcionki ładowane ze źródła zewnętrznego, a nie dostępne w pamięci urządzenia) mogą nie wyświetlać się zgodnie z oczekiwaniami na wszystkich urządzeniach lub 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 zobaczą spójny wygląd wiadomości. 

Klienty poczty e-mail, które 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 Androida 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

Niestandardowe czcionki w Gmailu i innych nieobsługiwanych skrzynkach e-mail

Odbiorcy korzystający z Gmaila (lub innych skrzynek odbiorczych, które nie obsługują czcionek niestandardowych) mogą zobaczyć czcionkę zastępczą, którą można ustawić w szablonie e-mailowym, a nie wybraną czcionkę niestandardową. Aby tego uniknąć, należy rozważyć wybranie bezpiecznej niestandardowej czcionki internetowej, 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 nowej czcionki niestandardowej w edytorze szablonów e-mailowych 

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

1. Otwórz blok tekstu w szablonie lub w karcie Style szablonu.
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 czcionki do szablonu e-mailowego 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 zaimportowanej czcionki, która została już dodana: 

1. Przejdź do: Treść > Obrazy i branding w Klaviyo.
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. Kliknij Edytuj w wyświetlonym menu. 
6. Kliknij liczbę wybranych czcionek, aby rozwinąć 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, wykonaj powyższe kroki, aby edytować istniejącą wersję czcionki, zamiast dodawać ją ponownie. 

Usuwanie czcionki

1. Przejdź do: Treść > Obrazy i branding w Klaviyo.
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. Kliknij Usuń w wyświetlonym menu. 

Wszelkie wiadomości w Klaviyo, które obecnie używają czcionki niestandardowej, natychmiast powrócą do czcionki zastępczej. Jeśli dodasz czcionkę ponownie, e-maile zaczną jej znowu używać. 

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. Nie możesz bezpośrednio przesłać pliku czcionki do Klaviyo. Jeśli nie masz dostępu do zespołu programistów, zalecamy znalezienie czcionki Google lub Adobe, która jest podobna do pożądanej 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), ustawiając nagłówek Access-Control-Allow-Origin na *, aby czcionka była dostępna dla skrzynek odbiorczych odbiorców. 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 nazwę, grubość i styl czcionki do odpowiednich pól.
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ą. Ta czcionka pojawi się u odbiorców korzystających z klientów, które nie obsługują niestandardowej czcionki. Wybierz czcionkę z listy dostępnych opcji, która jest podobna stylem do Twojej czcionki niestandardowej. 

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

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

Zastosowanie niestandardowej czcionki

Po skonfigurowaniu niestandardowej czcionki można ją zastosować do dowolnego tekstu w szablonie, m.in.: 

• W głównych stylach szablonów 
• W każdym stylu bloku 
• Do określonego fragmentu tekstu w bloku tekstowym 
• Do bloków przycisków, bloków produktów i innych typów bloków zawierających tekst 

Aby zastosować niestandardową czcionkę 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 niestandardową czcionkę z listy rozwijanej. 

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

W blokach tabel i blokach podziału Twoja niestandardowa czcionka pojawi się w obszarze roboczym (np. w podglądzie edycji), ale nie w panelu po lewej stronie. W panelu po lewej stronie 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
• Jak zadbać o czcionki w e-mailach