The Ultimate Guide to Web Fonts

Historycznie, wybór odpowiedniej czcionki dla twojego emaila nigdy nie był zbyt trudny, biorąc pod uwagę ograniczoną liczbę bezpiecznych czcionek internetowych do wyboru. Ale rzeczy się zmieniły. Coraz więcej projektantów wiadomości e-mail przesuwa granice i korzysta z tych samych technik rozwoju, które projektanci stron internetowych stosują od lat – implementując czcionki webowe w swoich wiadomościach e-mail.

Fonty webowe pozwalają projektantom stron internetowych na większą kreatywność w zakresie typografii, umożliwiając im wybór niestandardowych czcionek w swoich projektach.

Jak to zwykle bywa w przypadku przełamywania nowych granic w projektowaniu i rozwoju wiadomości e-mail, myślący przyszłościowo członkowie społeczności byli jednymi z pierwszych, którzy wprowadzili te techniki do naszych skrzynek pocztowych (i zwrócili na nie uwagę). Ogromne podziękowania należą się Campaign Monitor za fantastyczny przewodnik po fontach internetowych, Paulowi Airy’emu za „A Type of Email” oraz Style Campaign za inspirację.

W Ultimate Guide to Web Fonts, zagłębimy się w szczegóły tego, czym są fonty internetowe i jak projektanci emaili mogą je zaimplementować w swoich emailach.

Co to jest czcionka internetowa?

Istnieją dwa różne rodzaje czcionek dostępnych dla projektantów emaili dla ich emaili – czcionki bezpieczne i czcionki internetowe. Oto różnica między nimi:

• Czcionki bezpieczne
  Pomyśl o Arial, Times New Roman, Verdana lub Georgia jako najlepszych przykładach bezpiecznych czcionek internetowych. Są to domyślne czcionki, które można znaleźć w większości różnych systemów operacyjnych i urządzeń.

• Czcionki internetowe
  Czcionki internetowe nie są częścią domyślnych czcionek dostępnych na różnych urządzeniach i systemach operacyjnych, i są specjalnie zaprojektowane i licencjonowane do użytku na stronach internetowych. Kilka czcionek internetowych, które mogą być znane to Open Sans i Roboto.

Dlaczego czcionki internetowe?

Jako marketer i projektant, znasz presję, aby pozostać on-brand w e-mailu, z kolorami, projektowaniem i – tak – typografią. Zamykanie ważnych informacji w obrazach to standardowa praktyka w projektowaniu emaili, która pozwala pozostać wiernym marce i być kreatywnym. Ale „ukrywanie” tekstu w obrazach ogranicza dostępność wiadomości e-mail, ponieważ czytniki ekranu nie mogą odczytać tekstu na obrazie.

Czcionki webowe otwierają nowe możliwości kreatywności w typografii, pozwalając projektantom wiadomości e-mail być kreatywnym i dostępnym – a przy tym trzymać się wyglądu i charakteru marki.

Czcionki pocztowe i internetowe

Choć czcionki internetowe nie mają uniwersalnej obsługi, oto klienci poczty e-mail, w których są obsługiwane:

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook for Mac
• Outlook App

Lista obsługiwanych klientów poczty elektronicznej może wyglądać krótko, ale weź sobie do serca – większość z nich należy do 10 najpopularniejszych klientów poczty elektronicznej. To jest coś, czym warto się ekscytować!

*Pro Tip: W kwietniu 2018 roku Gmail wydał zaktualizowany interfejs dla swojego klienta poczty internetowej. Ten nowy interfejs wykorzystuje dwie popularne czcionki internetowe: Google Sans i Roboto. Co to oznacza? Mimo że Gmail nie obsługuje czcionek internetowych, jeśli użyjesz którejkolwiek z tych czcionek internetowych w swoich wiadomościach e-mail, będą one faktycznie renderowane w Gmailu. Wystarczy dodać te czcionki do atrybutu font-family CSS, jeśli chcesz ich użyć w wiadomości e-mail.

Odkryj swoje top 10 W przypadku e-mail marketingu wszystko zależy od odbiorców. Użyj Litmus Email Analytics, aby odkryć, które klienty poczty elektronicznej są najbardziej popularne wśród Twoich subskrybentów. Zarejestruj się za darmo! Odkryj swoją publiczność →

Jak osadzić czcionki internetowe w emailu

Istnieją trzy główne podejścia, które możesz przyjąć używając czcionek internetowych w swoich emailach.

@import

Używanie @import jest jednym z prostszych podejść do importowania czcionek internetowych w emailu. Umieść następującą linię kodu w <head> swojego emaila, zwykle na górze twojego <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

W tym przykładzie, nazwa importowanej rodziny czcionek to „Montserrat.”

Twój serwis czcionek internetowych da ci adres URL, którego potrzebujesz. Jeśli sam hostujesz czcionkę, będziesz musiał wskazać adres URL do miejsca, w którym znajduje się twój plik czcionki.

Ta metoda jest dobrze obsługiwana przez większość powyższych klientów poczty elektronicznej i tylko brakuje jej wsparcia w Androidzie 2.3 (Android Gingerbread) – starej wersji Androida, która ma znikająco mały udział w rynku.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Tak jak metoda @import, twoja usługa czcionek internetowych zdefiniuje wartość href. Jeśli sam hostujesz plik czcionki, zmień ten adres URL tak, aby wskazywał miejsce, w którym znajduje się czcionka na twoim serwerze. I będziesz chciał umieścić ten wiersz kodu w <główce> twojej wiadomości e-mail, na samej górze.

Metoda <link> działa nieco lepiej niż metoda @import, z obsługą wszystkich powyższych klientów poczty e-mail (hurra!).

Dlaczego więc miałbyś wybrać jedną metodę zamiast drugiej? Metoda @import odracza ładowanie czcionki internetowej, która jest importowana, aż HTML, w którym jest osadzona, zostanie w pełni załadowany. To może prowadzić do tego, że twoja czcionka internetowa będzie się nieco dłużej pojawiać w emailu, podczas gdy reszta emaila będzie się ładować. Odwrotnie, metoda <link> ładuje zasób inline jak kod pliku HTML jest czytany (od góry do dołu), co może opóźnić ładowanie twojego emaila jeśli twój plik czcionki internetowej jest szczególnie duży.

@font-face

Usługi czcionek internetowych online powszechnie oferują pięć formatów plików do wyboru: .eot, .woff, .woff2, .svg, i .ttf. Format .woff ma najlepsze wsparcie jeśli chodzi o pocztę elektroniczną, więc sugerujemy używanie tego formatu kiedy tylko możesz. Metoda @font-face jest jedyną metodą, która pozwala ci konkretnie wybrać format pliku, który chcesz zaimportować, co czyni ją najbardziej niezawodną metodą implementacji czcionek internetowych.

Oto typowa deklaracja @font-face do importowania czcionki internetowej do wiadomości e-mail przy użyciu Google Fonts jako wybranej przez nas usługi czcionek internetowych:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Niestety, jeśli używasz Google Fonts, nie jest łatwo znaleźć adres URL czcionki internetowej – jest kilka pułapek, przez które musisz przeskoczyć.

1. Wyszukaj czcionkę internetową, której chcesz użyć.
Po znalezieniu i wybraniu jej, na dole ekranu pojawi się mały czarny pasek. Kiedy go klikniesz, zobaczysz ekran taki jak ten:

2. Skopiuj adres URL czcionki internetowej (zaznaczony powyżej), i wklej go do paska adresu Safari lub Internet Explorera.
W tej metodzie używamy Safari lub Internet Explorera, ponieważ Google Fonts używa wykrywania przeglądarki, aby zdecydować, który typ pliku czcionki jest obsługiwany. Dla tej metody chcemy użyć typu pliku .woff. Używając Google Chrome typ pliku czcionki .woff2, który będzie serwowany w przeglądarce, która ma ograniczone wsparcie. Dzięki Elliot Ross za ten dodatkowy wgląd!

Po załadowaniu strony zobaczysz na niej deklarację CSS:

3. Skopiuj ten CSS i wklej go do sekcji <style>w twojej wiadomości e-mail.
Pomimo że ta metoda jest uważana za najbardziej kuloodporną, dostawca usługi czcionek internetowych może wprowadzić zmiany w adresie URL bezpośredniego dostępu używanym do importowania czcionek internetowych. Jeśli zdecydujesz się skorzystać z tej metody, testuj swoją pocztę regularnie, aby upewnić się, że czcionki internetowe nadal będą renderować się w czasie.

W Litmus, metoda @font-face jest naszą metodą importowania czcionek internetowych do naszych wiadomości e-mail.

Wszystkie zasługi za tę metodę importowania czcionek internetowych należą się zwolennikowi dostępności poczty elektronicznej Paulowi Airy, jak szczegółowo opisano w poprzednim biuletynie Type: E newsletter (który zdecydowanie powinieneś zasubskrybować, jeśli jeszcze nie jesteś).

Używanie czcionek internetowych w poczcie e-mail

Po zaimportowaniu czcionki internetowej użycie jej w poczcie e-mail jest tak proste, jak użycie bezpiecznej czcionki internetowej, przy użyciu nazwy font-family zdefiniowanej w metodzie importu:

font-family: 'Montserrat', sans-serif;

Wybór czcionki awaryjnej

Przy używaniu czcionek internetowych konieczne jest posiadanie awaryjnej bezpiecznej czcionki internetowej dla tych klientów poczty e-mail, którzy nie obsługują czcionek internetowych.

Domyślne bezpieczne czcionki internetowe

Każdy klient poczty e-mail ma domyślną czcionkę, jeśli czcionka wymieniona w stosie rodzin czcionek jest niedostępna. Na przykład Gmail używa Arial, Apple Mail używa Helvetica, a Outlook używa Calibri.

Jeśli nie podoba Ci się brzmienie żadnej z tych domyślnych czcionek, mamy dobrą wiadomość – możesz wybrać swoją czcionkę awaryjną na stosie Font-Family.

font-family: 'Montserrat', Verdana, sans-serif;

Pomyśl o tym jako o liście preferowanych czcionek o ustalonym priorytecie. Jeśli klient nie może spełnić Twojego wyboru numer jeden, wróci do następnej na liście.

Na przykład, używając powyższego stosu fontów, Gmail zignoruje pierwszą czcionkę na liście, ponieważ jest to czcionka internetowa, która nie jest obsługiwana w Gmailu, a czcionką renderowaną w wiadomości e-mail będzie Verdana. Jeśli Verdana nie jest obsługiwana na używanym urządzeniu (co byłoby bardzo rzadkie, ponieważ Verdana jest czcionką bezpieczną dla stron internetowych), urządzenie użyje domyślnej czcionki bezszeryfowej dla swojego systemu, ponieważ jest to trzecia czcionka na liście.

Jak wybrać właściwą czcionkę awaryjną

Wybór właściwej czcionki awaryjnej, która zachowa wygląd Twojego emaila, jest kluczem do dostarczenia wspaniałego doświadczenia dla wszystkich Twoich subskrybentów, bez względu na to, jakiego klienta email używają.

Czcionki awaryjne powinny być tego samego typu, co czcionka webowa – użyj bezszeryfowej czcionki awaryjnej, jeśli Twoja czcionka webowa jest bezszeryfowa, i szeryfowej czcionki awaryjnej, jeśli Twoja czcionka webowa jest również czcionką szeryfową. Używanie tego samego stylu czcionki pomoże zachować wygląd Twojego emaila w różnych klientach poczty. Możesz pójść o krok dalej, analizując wysokość x czcionek.

Wysokość x to pionowa wysokość czcionki. Idealnie byłoby wybrać czcionkę awaryjną, która ma podobną wysokość x, aby zapobiec rozpadowi projektu wiadomości e-mail, gdy używana jest czcionka awaryjna.

Oto przykład subtelnych różnic w wysokości x między czcionkami Verdana, Arial i czcionką internetową Proxima Nova. Te subtelne różnice mogą zrobić całą różnicę w zrobieniu lub zepsuciu projektu wiadomości e-mail, gdy czcionki webowe nie są renderowane.

CSS Font Stack ma kompletną listę – włączając w to pokrycie systemu operacyjnego – bezpiecznych czcionek internetowych, które mogą być używane jako czcionki awaryjne.

Avoiding Faux Bold / Faux Italic

Jeśli masz towarzyszące pogrubione i kursywne wersje plików czcionek internetowych, to użyjmy ich! Projektanci krojów pisma włożyli wiele myśli i wysiłku w uzyskanie wszystkich różnych stylów czcionki w sam raz, więc najlepszą praktyką jest zastosowanie oryginalnego projektu czcionki, zamiast pozwalać klientowi poczty elektronicznej lub przeglądarce na przypadkowe zastosowanie faux bold lub faux italic do zwykłej czcionki.

Podstawowo, NIE rób tego:

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Podobnie jak w przypadku projektowania stron internetowych, możesz przyciągnąć oryginalne czcionki przez włączenie tych stylów do swojego stosu @font-face, tak jak w przypadku:

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Jak widzisz, różne style przyciągają różne czcionki niezależnie od font-family. W ten sposób, jeśli stylizujesz swoją czcionkę w HTMLu w ten sposób:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…wtedy będzie ona przyciągać prawdziwą czcionkę 'Montserrat-BoldItalic’! Podobnie, tylko dodanie font-weight: bold; przyciągnie 'Montserrat-Bold’ i tylko dodanie font-style: italic; przyciągnie 'Montserrat-Italic’.

Więc, możesz się zastanawiać – dlaczego robić to w ten sposób zamiast deklarować inną font-family dla każdego stylu, który również przyciągnie oryginalne czcionki? Oto jak to wygląda:

Nie rób tego również!

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Przedstawia to pewien problem. Używanie nazw rodzin czcionek do przechowywania stylów nie tylko tworzy nadmiernie skomplikowany i nadmiarowy CSS, ale także pozbawia twój tekst stylów, jeśli zadziałają mechanizmy awaryjne. Więc na przykład – jeśli oglądasz powyższy kod w Gmailu (który nie obsługuje niestandardowych czcionek internetowych), to zobaczysz tylko niepogrubioną, niepodświetloną Verdanę zamiast Montserrat Bold Italic. Utrzymując oddzielnie font-family i font-weights/font-styles, Twoje czcionki awaryjne nadal będą zachowywać prawidłową stylizację.

Outlook, co mi robisz!

Z Times New Roman jako domyślną czcionką awaryjną, Outlook tradycyjnie był wyzwaniem dla email marketerów z sercem do typografii. Podczas gdy Outlook 2019 – najnowsza wersja klienta pocztowego Microsoftu – honoruje czcionki awaryjne określone w kodzie, starsze wersje Outlooka nadal stanowią wyzwanie.

Jeśli używasz metody importu @font-face, Outlook 2007/10/13/16 będzie domyślnie korzystał z Times New Roman bez względu na to, jaką czcionkę awaryjną masz zainstalowaną. Dobrą wiadomością jest to, że istnieje dobrze przetestowany hack, który rozwiązuje ten problem.

Następujący CSS jest skierowany do Outlooka, jak oznaczono przez <!-> i <!->, i mówi Outlookowi, aby używał innego stosu czcionek.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Użyj klasy „fallback-font” w swoim emailu, gdziekolwiek definiujesz font-family:

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

A twoje czcionki w Outlooku 2007/10/13 będą z wdziękiem powracać do Arial, zamiast Times New Roman.

Innym rozwiązaniem tego błędu jest zawinięcie kodu importu @font-face w zapytanie o media, ukrywając go przed Outlookiem:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook po prostu zignoruje „Montserrat” w twoim stosie font-family i odczyta następną czcionkę.

Istnieje również metoda kierowania właściwości specyficznej dla Microsoft Office, mso-font-alt, z wybraną przez ciebie czcionką systemową do twojego bloku deklaracji @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

To powie Outlookowi dla MS Office, aby domyślnie używał twojej przypisanej czcionki awaryjnej.

Gdzie znaleźć czcionki internetowe

Google Fonts

Jest mnóstwo dostępnych usług czcionek internetowych, ale Google Fonts jest naszą ulubioną. Usługa jest całkowicie darmowa, a czcionki internetowe można pobrać na swój komputer, jeśli makietujesz projekty w Adobe Photoshop, Sketch lub innym programie do projektowania.

Typekit by Adobe

Popularna usługa subskrypcji czcionek firmy Adobe była w przeszłości mało przydatna dla projektantów poczty elektronicznej, ponieważ Typekit opierał się na JavaScript do osadzania czcionek. Od sierpnia 2017 roku Typekit umożliwił korzystanie z czcionek internetowych przy użyciu tylko CSS – bez konieczności używania JavaScript – co otwiera czcionki internetowe znalezione w Typekit do użytku w wiadomościach e-mail. Możesz znaleźć szczegółowe instrukcje dotyczące dodawania czcionek internetowych Typekit do wiadomości e-mail za pomocą @import w dokumentacji pomocy Typekit.

Więcej usług czcionek internetowych

Jeśli szukasz jeszcze więcej witryn, które oferują czcionki internetowe licencjonowane do użytku w wiadomościach e-mail (głównie na zasadzie płatnej), sprawdź niektóre z poniższych usług:

• MyFonts
• Commercial Type
• Font Spring
• Font Shop
• You Work for Them
• Village

.

• Process Type Foundry

Licencjonowanie fontów webowych w emailu

Fonty webowe były pierwotnie zaprojektowane do używania wyłącznie na stronach internetowych, więc ich licencjonowanie jest zazwyczaj do użytku tylko na stronach internetowych i aplikacjach mobilnych. Powodem, dla którego wiele usług czcionek internetowych nie pozwala na użycie w e-mailu jest to, że jest to postrzegane jako dystrybucja czcionki, co jest sprzeczne z wieloma umowami licencyjnymi użytkownika końcowego (EULA).

Dostawcy czcionek internetowych na powyższej liście zawierają licencje na użycie czcionek internetowych w e-mailu. Jednak wiele licencji są naliczane na liczbę miesięcznych otwarć, które powinny być brane pod uwagę przy korzystaniu z płatnych usług czcionek internetowych.

Czy mogę używać czcionek internetowych?

Nie ma absolutnie żadnej szkody w użyciu czcionek internetowych jako progresywne ulepszenie w swoich e-mailach teraz. Zaimplementuj poprawnie swoje czcionki awaryjne i pchnij swoje e-maile w przyszłość!

Warto przyjrzeć się swojej bazie subskrybentów, aby zobaczyć ilu z nich ogląda Twoje e-maile w kliencie e-mail obsługującym czcionki webowe. Jeśli większość nie, to po prostu nie będzie to warte twojego czasu i wysiłku, szczególnie jeśli rozważasz użycie płatnych czcionek webowych.

Czcionki webowe zrobione dobrze

Aby dać ci trochę inspiracji do tego co jest możliwe, oto kilka z naszych ulubionych emaili z czcionkami webowymi.

Nie zapomnij testować

Ponieważ użycie czcionek internetowych w poczcie e-mail jest nadal uważane za eksperymentalne, zalecamy częste testowanie, szczególnie jeśli wdrożyłeś czcionki internetowe w szablonach, które mogą nie być regularnie aktualizowane. Zmiany i aktualizacje w możliwościach renderowania klientów email nie są zazwyczaj ogłaszane z wyprzedzeniem i mogą zdarzać się sporadycznie, więc najlepiej jest testować regularnie.

Warto zauważyć, że jeśli masz zainstalowaną czcionkę internetową na własnym komputerze, będziesz mógł ją zobaczyć podczas testowania na żywo w kliencie poczty na swoim komputerze – coś, o czym warto pamiętać na wypadek, gdyby nagle okazało się, że Gmail obsługuje teraz czcionki internetowe.

TESTUJ TYPOGRAFIĘ W SWOICH KAMPANIACH

Zainspirowany, aby przenieść swoją grę w czcionki na wyższy poziom? Pamiętaj, aby przetestować swoje kampanie przed ich wysłaniem. Wypróbuj Litmus za darmo i upewnij się, że Twoja typografia wygląda niesamowicie w ponad 90 klientach poczty e-mail, w tym na komputerach stacjonarnych, webmailach i urządzeniach mobilnych.

Dowiedz się więcej →