Czcionki internetowe: jak sprawić, by działały idealnie w wiadomościach e-mail

Opublikowany: 2021-04-24

Z moich bardzo naukowych badań (obserwowałem moją córkę, gdy w ciągu ostatniego roku zaczęła pisać raporty) dowiedziałem się, że jednym z pierwszych aspektów projektowania, którymi ludzie zaczynają się bawić, jest typografia. Kiedy po raz pierwszy zaczynasz pisać raporty, spędzasz godziny, próbując znaleźć najlepszą czcionkę, której możesz użyć. Ok, może nie godzinami, ale większość ludzi poświęca temu trochę czasu. Ponieważ, jak wiedzą duże marki, typografia ma znaczenie. I to ma znaczenie w e-mailu.

Ale liczy się też dostępność. Przestań więc zatrzymywać wiadomość w obrazach i zacznij używać tekstu na żywo z bezpiecznymi czcionkami internetowymi i czcionkami internetowymi. W końcu tekst, który nie jest zależny od obrazów i może być czytany przez szerszą publiczność, prowadzi do wspaniałych wrażeń subskrybentów. A ponieważ Twoi najlepsi klienci — wiadomość e-mail zwraca 36 USD za każdy zainwestowany 1 USD — jest to świetne rozwiązanie dla ogólnej strategii marketingowej.

W tym poście na blogu opiszę:

Czcionki internetowe a bezpieczne czcionki internetowe
Korzyści z czcionek internetowych
Wsparcie i licencjonowanie klienta poczty e-mail
Gdzie znaleźć czcionki internetowe
Kodowanie ich na e-maile
Świetne przykłady czcionek internetowych w wiadomościach e-mail

Czcionki internetowe a bezpieczne czcionki internetowe

Istnieją dwa różne sposoby tworzenia tekstu na żywo: bezpieczne czcionki internetowe i czcionki internetowe. Choć brzmią tak samo, istnieją zdecydowane różnice. Aby zrozumieć te różnice, przyjrzyjmy się, jak działają czcionki w Twoich e-mailach.

Gdy wiadomość e-mail jest kodowana, czcionka jest deklarowana przy użyciu właściwości CSS o nazwie font-family. Ta właściwość rodziny czcionek może mieć tylko jedną nazwę czcionki lub wiele nazw czcionek — często określanych jako stos czcionek. Dołączenie wielu nazw czcionek gwarantuje, że jeśli jedna czcionka nie działa, istnieje wybrana czcionka zastępcza lub zapasowa. Bez podawania wielu nazw czcionek klient poczty e-mail decyduje o czcionce zapasowej. Gdy Twoi subskrybenci otwierają Twój e-mail, przeglądarka odczytuje właściwość rodziny czcionek i pobiera czcionkę, której chcesz użyć.

Bezpieczne czcionki internetowe

W przypadku czcionek bezpiecznych w Internecie przeglądarka pobiera czcionkę z lokalnego katalogu czcionek. Oznacza to, że są to czcionki, które są już zainstalowane na twoim komputerze. Wszystkie komputery są dostarczane z preinstalowanymi czcionkami i są one uważane za bezpieczne w Internecie. Są bezpieczne w użyciu, ponieważ istnieje bardzo duża szansa, abonent będzie już je też.

Minusem jest to, że liczba bezpiecznych czcionek internetowych jest ograniczona w porównaniu z czcionkami internetowymi. Są one używane dość często, więc jest mniej prawdopodobne, że się wyróżnisz (jeśli o to Ci chodzi).

Oczywiste bezpieczne czcionki internetowe to:

Arial
Helvetica
Verdana
Gruzja
Czcionka Times New Roman

Ale istnieje kilka innych, z których możesz korzystać z pewnym stopniem pewności. Wyrwij się więc ze standardowej pętli czcionek Arial lub Helvetica i znajdź bezpieczną czcionkę internetową, która działa dla Twojej marki.

Najlepszym źródłem bezpiecznych czcionek internetowych, jakie znalazłem, są czcionki CSS. Podoba mi się, że zawierają procent użycia na komputerach PC i Mac dla każdej czcionki, więc wiesz w przybliżeniu, ilu subskrybentów może zobaczyć żądaną czcionkę, a ilu zamiast tego zobaczy twoją rezerwę.

Czcionki internetowe

Czcionki internetowe są pobierane z serwera — hostowanego przez Ciebie lub zewnętrznego (takiego jak Google lub Adobe). Z tego powodu różnorodność czcionek, których można użyć, jest znacznie większa i można ich używać na dowolnym komputerze… o ile przeglądarka lub klient poczty e-mail może pobrać czcionkę. W niektórych przypadkach subskrybent może już mieć sieć czcionka pobrana i zainstalowana na ich komputerze, więc te czcionki będą działać nawet w klientach poczty e-mail, które nie obsługują czcionek internetowych!

Tak więc, chociaż czcionki internetowe zapewniają znacznie większą różnorodność i swobodę twórczą, mają swoją cenę: ograniczoną obsługę klienta poczty e-mail (o której zagłębiam się bardziej niżej).

Dlaczego czcionki internetowe?

Możesz się więc zastanawiać, po co w ogóle zawracać sobie głowę czcionkami internetowymi? Jako marketer i projektant znasz presję, aby pozostać przy swojej marce w wiadomościach e-mail z kolorami, wzorami i – tak – typografią. Czcionki internetowe pozwalają zaprezentować swoją markę bez polegania na obrazach w tekście.

Blokowanie ważnej kopii na obrazach to standardowa praktyka w projektowaniu wiadomości e-mail jako sposób na zachowanie marki i kreatywność. Jednak „ukrywanie” tekstu w obrazach ogranicza dostępność wiadomości e-mail, ponieważ czytniki ekranu nie mogą odczytać tekstu na obrazie.

Przykładowy adres e-mail Ace Hardware z czcionkami internetowymi z obrazami i bez — Wysyłaj e-maile z obrazami i bez, gdy używasz czcionki internetowej

Przykładowy e-mail Magic Spoon z czcionkami internetowymi z obrazami i bez — Wysyłaj e-maile z obrazami i bez, gdy używasz tekstu w obrazach

Ponadto tekst na zdjęciach szkodzi wrażeniach subskrybentom, jeśli mają domyślnie wyłączone obrazy. Może to nie jest duża część Twoich subskrybentów, ale tak naprawdę nie ma sposobu, aby dowiedzieć się, czy ktoś ma wyłączone obrazy i otwiera Twój e-mail. Dlaczego więc nie zapewnić najlepszych wrażeń jak najszerszemu gronu odbiorców?

Czcionki internetowe otwierają nowe możliwości kreatywności w typografii, umożliwiając projektantom e-maili bycie kreatywnym i przystępnym — oraz trzymanie się wyglądu i stylu swojej marki.

Czy mogę używać czcionek internetowych w wiadomościach e-mail?

Jeśli jeszcze nie zgadłeś, odpowiedź brzmi: tak! Ale – jak we wszystkich sprawach poczty elektronicznej – są pewne zastrzeżenia.

Obsługa klienta poczty e-mail

Czcionki internetowe działają tylko w niektórych klientach poczty e-mail i należy zadbać o to, aby tam, gdzie nie są obsługiwane, czcionka z wdziękiem wróciła do normy.

Klient poczty e-mail	Obsługa czcionek internetowych
Poczta Apple	✓ Tak
Perspektywy 2007-2016	✘ Nie
Perspektywy 2019	✘ Nie*
Outlook dla komputerów Mac	✓ Tak
Outlook Office 365	✘ Nie*
Aplikacja Gmail	✘ Nie*
iOS	✓ Tak
Aplikacja Outlook	✘ Nie
Poczta Samsung	✘ Nie*
Poczta AOL	✘ Nie
Gmail	✘ Nie*
Biuro 365	✘ Nie
Outlook.com	✘ Nie
Wieśniak! Poczta	✘ Nie

*Ma pewne niepewne wyniki w zależności od metody osadzania wiadomości e-mail, omówione później.

Warto przyjrzeć się swojej bazie subskrybentów, aby zobaczyć, ile osób przegląda Twoje e-maile w kliencie pocztowym obsługującym czcionki internetowe. Jeśli masz wystarczającą liczbę subskrybentów, jest to wspaniały sposób na dodanie e-mailowi dodatkowego akcentu.

Jeśli większość nie, po prostu nie byłoby to warte twojego czasu i wysiłku, zwłaszcza jeśli rozważasz użycie płatnej czcionki internetowej.

Z jakich klientów poczty e-mail korzystają Twoi subskrybenci?

Dowiedz się, gdzie Twoi subskrybenci otwierają Twoje e-maile i jak się angażują — dzięki Litmus Email Analytics. Uzyskaj informacje potrzebne do optymalizacji wiadomości e-mail i nie tylko.

Dowiedz się więcej →

Koncesjonowanie

Czcionki internetowe zostały pierwotnie zaprojektowane do użytku wyłącznie w witrynach internetowych, więc ich licencja jest zwykle przeznaczona do użytku tylko w witrynach internetowych i aplikacjach mobilnych. Powodem, dla którego wiele usług czcionek internetowych nie zezwala na używanie w wiadomościach e-mail, jest to, że jest to postrzegane jako rozpowszechnianie czcionki, co jest sprzeczne z umową licencyjną użytkownika końcowego (EULA) wielu usług.

Wszyscy dostawcy czcionek internetowych, z którymi się kontaktowaliśmy, obsługiwali swoje czcionki w wiadomościach e-mail. Każdy dostawca miał inną wymaganą licencję, więc nie ma standardowego sposobu licencjonowania czcionek w wiadomościach e-mail. Jeśli chcesz użyć czcionki, skontaktuj się z firmą, aby dowiedzieć się, w jaki sposób licencjonuje swoje czcionki.

Gdzie znaleźć czcionki internetowe

Przemyślałeś więc wszystko i zdecydowałeś, że chcesz wypróbować czcionki internetowe. Dzięki pozornie nieskończonym opcjom możesz znaleźć takie, które pasują do Twojej marki. Ale ważne jest również, aby pamiętać o dostępności.

Niektóre czcionki są łatwiejsze do odczytania niż inne.

Czcionki ozdobne lub ozdobne, takie jak czcionki ekranowe lub pisma odręcznego, mogą utrudniać osobom z wadami wzroku lub dysleksją rozróżnienie kształtów liter. Czcionki bezszeryfowe (czcionki bez rozszerzonych funkcji lub zawijanych liter, takie jak Arial, Calibri, Century Gothic lub Helvetica) oraz czcionki slab (czcionki z grubszymi liniami, takie jak Museo Slab i Rockwell) są uważane za bardziej dostępne.

Oto kilka dobrych miejsc, w których można zacząć szukać.

Czcionki Google

Dostępnych jest wiele usług czcionek internetowych, ale naszą ulubioną jest Google Fonts. Usługa jest całkowicie bezpłatna i możesz pobrać czcionki internetowe na swój komputer, jeśli tworzysz makiety projektów w Adobe Photoshop, Sketch lub innym oprogramowaniu do projektowania.

Czcionki Adobe

Typekit stał się czcionkami Adobe Fonts w październiku 2018 r. Obsługują teraz zarówno metodę <link>, jak i @import do używania czcionek jako czcionek internetowych (więcej na ten temat w dalszej części). Usługa nie jest całkowicie darmowa, ale jeśli masz już jakąkolwiek subskrypcję Creative Cloud, jest ona do niej dołączona.

Usługi czcionek internetowych

Istnieje kilka innych płatnych usług czcionek internetowych. Musisz upewnić się, że masz odpowiednią licencję, aby używać ich w wiadomości e-mail.

Typ Sieć (licencja internetowa)
Odlewnia typu procesu (licencja internetowa)
Optimo (licencja na reklamy cyfrowe)
Fontspring (niestandardowa licencja e-mail)
Typoteka (licencja internetowa)
Typ produkcji (licencja na reklamę online)
MyFonts (licencja internetowa)
Typ komercyjny (licencja internetowa)

W przypadku licencji internetowych może istnieć możliwość samodzielnego hostowania czcionki lub pozostawienia czcionki hostowanej przez dostawcę. W przypadku niektórych licencji internetowych płacisz za określoną liczbę wyświetleń strony za pomocą każdego e-maila, który ładuje czcionkę liczoną jako odsłona strony, więc upewnij się, że bierzesz to pod uwagę przy zakupie licencji.

Jak osadzić czcionki internetowe w wiadomościach e-mail

Ponieważ czcionek internetowych zazwyczaj nie można znaleźć na czyimś urządzeniu lokalnym, a zamiast tego są hostowane gdzie indziej, musisz najpierw „osadzić” lub zaimportować czcionkę internetową do wiadomości e-mail, zanim będziesz mógł z nich faktycznie korzystać.

1. Uzyskaj adres URL pliku czcionki

Będziesz potrzebować adresu URL czcionki internetowej, aby wywołać ją w wiadomości e-mail. Twoja usługa czcionek internetowych powinna mieć ten adres URL. Ale jeśli sam hostujesz plik czcionki, pobierz adres URL, z którego czcionka internetowa znajduje się na twoim serwerze. Upewnij się, że jest to publiczny adres URL i nie pochodzi z lokalnego serwera. W przeciwnym razie Twoi subskrybenci nie będą mogli uzyskać dostępu do czcionki internetowej i zamiast tego zobaczą czcionkę zastępczą.

Jeśli korzystasz z Google Fonts, znalezienie adresu URL jest trochę trudne, ale niezbyt trudne. Dowiedz się, jak w następnym kroku zastosować metodę osadzania @font-face.

2. Zaimportuj czcionkę internetową za pomocą jednej z trzech metod

Istnieją trzy metody osadzania czcionek internetowych w wiadomościach e-mail (z zastrzeżeniem, które może ograniczać metodę, której możesz użyć). Trzy metody osadzania czcionki to:

<link>
@import
@czcionka

Dlaczego więc miałbyś wybrać jedną metodę, a nie inną?

Metoda @import odracza ładowanie importowanej czcionki internetowej do momentu pełnego załadowania kodu HTML, w którym jest osadzona. Może to doprowadzić do tego, że czcionka internetowa pojawi się w wiadomości e-mail trochę dłużej, podczas gdy reszta wiadomości zostanie załadowana. I odwrotnie, metoda <link> ładuje zasób w tekście, gdy kod pliku HTML jest odczytywany (od góry do dołu), co może opóźnić ładowanie wiadomości e-mail, jeśli plik czcionki internetowej jest szczególnie duży.

Inną rzeczą, o której należy pamiętać przy wyborze metody, jest to, co obsługuje ESP.

Możesz stworzyć piękny kod, który działa w Litmus przez cały dzień, ale jeśli Twój ESP zmieni Twój kod, jak wiemy, że większość z nich robi, nic, co zrobisz, nie będzie miało znaczenia. Upewnij się, że ESP nie zmienia kodu w sposób, który spowodowałby, że czcionki przestaną działać. W Litmus nasze ESP nie pozwala nam na dołączanie warunków MSO wokół elementów stylu. Tak więc metody <link> i @import nie będą dla nas działać, ponieważ nie są dobrze obsługiwane w programie Outlook, co omówimy poniżej.

Korzystanie z <link>

Korzystanie z metody <link> jest stosunkowo prostą metodą osadzania czcionek w wiadomości e-mail. Umieść ten wiersz kodu w <head> wiadomości e-mail, u góry:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Korzystanie z @importu

Metoda @import jest również stosunkowo prostą metodą. Umieść ten wiersz kodu w <head> wiadomości e-mail między tagami <style>:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Korzystanie z @font-face

Internetowe usługi czcionek internetowych zwykle oferują pięć formatów plików do wyboru: .eot, .woff, .woff2, .svg i .ttf. Formaty .woff i .woff2 zapewniają najlepszą obsługę poczty e-mail, dlatego zalecamy używanie jednego lub obu tych formatów, kiedy tylko możesz. Metoda @font-face to jedyna metoda, która pozwala konkretnie wybrać format pliku, który chcesz zaimportować, co czyni ją najbardziej kuloodporną 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 usługi czcionek internetowych:

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Jeśli korzystasz z Google Fonts, znalezienie kodu @font-face nie jest najłatwiejsze, ale nie jest zbyt trudne.

Najpierw musisz znaleźć czcionkę, której chcesz użyć w Google Font. Następnie wybierz styl, którego chcesz użyć. Po prawej stronie pojawi się menu wysuwane.

googe_fonts

W wysuwanym menu będzie można wybrać <link> lub @import. Oba z nich będą miały adres URL (podświetlony na powyższym zrzucie ekranu). Możesz skopiować ten adres URL i wkleić go w pasku adresu przeglądarki, aby znaleźć arkusz stylów CSS używany przez Google.

google_font_api

Skopiuj i wklej „łacińską” wersję @font-face między tagami <style>.

W firmie Litmus metoda @font-face jest naszą podstawową implementacją importowania czcionek internetowych do naszych e-maili.

Cała zasługa za tę metodę importowania czcionek internetowych należy do zwolennika ułatwień dostępu do poczty e-mail Paula Airy'ego, jak opisano w poprzednim biuletynie Type: E.

3. Wybierz odpowiednią czcionkę zastępczą

Podczas korzystania z czcionek internetowych konieczne jest posiadanie rezerwowej, bezpiecznej czcionki internetowej dla tych klientów poczty e-mail, które nie obsługują czcionek internetowych.

Każdy klient poczty e-mail ma domyślną czcionkę, jeśli czcionka wymieniona w stosie rodziny czcionek jest niedostępna. Na przykład Gmail używa Arial, Apple Mail używa Helvetica, a Outlook używa Times New Roman. Jeśli nie podoba Ci się dźwięk żadnej z tych domyślnych czcionek, mamy dobrą wiadomość — możesz wybrać czcionkę zastępczą podczas kodowania w stosie rodziny czcionek (w następnym kroku).

Wybór odpowiedniej czcionki zastępczej, która zachowuje projekt wiadomości e-mail, jest kluczem do zapewnienia wspaniałych wrażeń wszystkim subskrybentom, bez względu na to, z którego klienta poczty e-mail korzystają.

Czcionki zastępcze powinny być tego samego typu co czcionka internetowa — użyj czcionki zastępczej bezszeryfowej, jeśli czcionka internetowa jest czcionką bezszeryfową, oraz czcionki zastępczej szeryfowej, jeśli czcionka internetowa jest również czcionką szeryfową. Użycie tego samego stylu czcionki pomoże zachować projekt wiadomości e-mail w różnych klientach poczty e-mail.

Możesz pójść o krok dalej, analizując wysokość x czcionek.

Wysokość x to pionowa wysokość czcionki. Najlepiej byłoby wybrać czcionkę zastępczą o podobnej wysokości x, aby zapobiec rozpadaniu się projektu wiadomości e-mail, gdy czcionka zastępcza jest używana.

przykład x-height porównujący verdana, arial i proxima nova

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ą mieć ogromny wpływ na tworzenie lub łamanie projektu wiadomości e-mail, gdy czcionki internetowe nie są renderowane.

4. Użyj swoich czcionek w wiadomości e-mail

Po zaimportowaniu czcionki internetowej i wybraniu opcji zastępczych używanie ich w wiadomościach e-mail jest tak proste, jak używanie bezpiecznej czcionki internetowej. Po prostu użyj nazwy rodziny czcionek zdefiniowanej w metodzie importu, a następnie czcionki zastępczej w linijce CSS lub w nagłówku:

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

Pomyśl o tym jako o priorytetowej liście preferowanych czcionek. Jeśli klient poczty e-mail nie spełni Twojego wyboru numer jeden, powróci do następnego na Twojej liście.

Na przykład, używając powyższego stosu rodziny czcionek, Gmail zignoruje pierwszą czcionkę na liście, ponieważ jest to czcionka internetowa, która nie jest obsługiwana w Gmailu. Więc renderowaną czcionką 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ą w Internecie), urządzenie użyje domyślnej czcionki bezszeryfowej dla swojego systemu, ponieważ jest to trzecia czcionka na liście.

5. Unikaj faux pogrubienia lub fałszywej kursywy!

Jeśli masz dołączone pogrubione i kursywą wersje swoich plików czcionek internetowych, użyjmy ich!

Projektanci Krój pisma włożyli dużo myśli i wysiłku w uzyskanie wszystkich różnych stylów czcionki tylko w prawo, więc najlepszym rozwiązaniem jest zastosowanie oryginalnego typu konstrukcji raczej niż umożliwiając klientowi e-mail lub przeglądarki, aby przypadkowo zastosowanie faux pogrubione lub faux kursywa do zwykła czcionka.

Zasadniczo NIE rób tego:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Podobnie jak projektowanie stron internetowych, możesz pobrać oryginalne czcionki, umieszczając te style w swoim stosie @font-face, na przykład:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Jak widać, różne style wykorzystują różne czcionki, niezależnie od rodziny czcionek. W ten sposób, jeśli stylizujesz czcionkę w kodzie HTML w ten sposób:

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

…wtedy wciągnie oryginalną czcionkę „Roboto-BoldItalic” ! Podobnie, po prostu dodając grubość czcionki: pogrubienie; pobierze „Roboto-Bold” i po prostu doda styl czcionki: kursywa; wstawi „Roboto-kursywa” .

Tego też NIE rób!

Możesz się więc zastanawiać — po co to robić w ten sposób, zamiast deklarować inną rodzinę czcionek dla każdego stylu, która również pobiera oryginalne czcionki? Tak to wygląda:

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

To stwarza problem. Używanie nazwy font-family Przechowalnia stylów nie tylko tworzy nadmiernie skomplikowane i zbędne CSS, ale także pozbawia tekst stylizacji jeśli fallbacks kopać. Więc na przykład, jeśli oglądasz powyższy kod w Gmailu (który nie robi” t obsługuje niestandardowe czcionki internetowe), wtedy zobaczysz tylko Verdana bez pogrubienia i kursywy zamiast Roboto Bold Italic .

Zachowując odrębność rodziny czcionek i grubości lub stylów czcionek, czcionki zastępcze będą nadal zachowywać poprawny styl.

6. Użyj poprawki dla Outlooka

Outlook ma cudowną cechę, na którą warto zwrócić uwagę. Zwłaszcza jeśli z tego korzysta wielu Twoich subskrybentów.

Zobacz, jak Twoje e-maile wyglądają w Outlooku i nie tylko

Każdy klient poczty ma swoje dziwactwa. Na szczęście możesz je zobaczyć w swoich e-mailach, zanim klikniesz wyślij — dzięki Lakmusowym podglądom wiadomości e-mail. Nigdy więcej zepsutych e-maili.

Dowiedz się, jak →

Jeśli użyjesz metody <link> lub @import, wszystko przed programem Outlook 2019 będzie wyświetlać Times New Roman, niezależnie od tego, jakie rozwiązania zastępcze wprowadzisz dla swojej czcionki.

Najprostszym rozwiązaniem tego problemu jest użycie metody @font-face. Ale jeśli potrzebujesz użyć metody <link> lub @import, użyj warunków warunkowych Microsoft Office (MSO), aby zakomentować tę sekcję swoich stylów. Dzięki temu program Outlook nie będzie ich widział i będzie używał czcionek zastępczych zgodnie z przeznaczeniem:

Bez warunków warunkowych MSO	Z warunkami warunkowymi MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Ale poczekaj chwilę. Właśnie powiedziałem wszystko przed Outlookiem 2019. Co więc dzieje się w Outlooku 2019 (i Outlook Office 365)? Cóż, w tych klientach poczty e-mail Outlook powraca do twojego awaryjnego rozwiązania, nawet bez warunków warunkowych MSO.

Bez warunków warunkowych MSO	Z warunkami warunkowymi MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

W rzeczywistości w tych klientach wygląda na to, że @import faktycznie działa! Ale czy to naprawdę? Wypróbowaliśmy to z innymi czcionkami, a wyniki były mniej więcej takie, jakich można oczekiwać od Outlooka:

testowanie czcionek internetowych w programie Outlook

Wygląda na to, że czasami umieszcza czcionkę systemową zamiast określonych czcionek. A w przypadku Montserrat nie jestem do końca pewien, co się tam dzieje, ale to nie jest Montserrat. Właściwie wygląda bardziej jak Lato. Wygląda więc na to, że Outlook próbuje obsługiwać czcionki internetowe, ale to jeszcze nie wszystko. To zdecydowanie coś, na co warto zwrócić uwagę w przyszłości.

W międzyczasie z powyższych powodów — i ponieważ nie możesz kierować reklam tylko na program Outlook 2019 — najlepiej jest użyć @font-face lub ukryć deklaracje <link> lub @import.

Jeśli zauważysz, że Outlook konwertuje twoją czcionkę na Times New Roman, możesz dodać mso-font-alt: 'Arial'; do bloku @font-face, aby zapewnić alternatywną rezerwę dla programu Outlook:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Innym rozwiązaniem, którego można użyć, jest zakodowanie rodziny czcionek z wbudowanym bezpiecznym stosem czcionek internetowych i dołączenie bloku <style> w celu zastąpienia czcionek czcionką internetową. Następnie wystarczy ukryć blok stylu przed Outlookiem:

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Użyj też poprawki dla Gmaila (żartuję, nie ma takiej)

Możesz się więc zastanawiać: „A co z Gmailem? Jesteśmy przy użyciu Google Fonts po wszystkim.”

Można by pomyśleć, że skoro Gmail jest produktem Google, a Google Fonts jest produktem Google, będą dobrze ze sobą współpracować. Ale niestety tak nie jest.

Czcionki internetowe nie działają w Gmailu, nawet jeśli są czcionkami Google i nawet jeśli używasz kodu dostarczonego przez Google. Jedynym wyjątkiem jest Roboto:

Korzystanie z różnych czcionek Google	Korzystanie z różnych metod osadzania

W rzeczywistości w aplikacji Gmail Mail na Androida wszystkie czcionki bezszeryfowe wracają do Roboto:

Korzystanie z różnych czcionek Google	Korzystanie z różnych metod osadzania

Trochę inspiracji na początek

W porządku, teraz kto jest gotowy, aby zobaczyć kilka niesamowitych przykładów marek używających czcionek internetowych w e-mailach we właściwy sposób?

Ace Hardware używało czcionek internetowych tam, gdzie są one obsługiwane, ale wybrał Rockwell jako rezerwową czcionkę slab, aby upewnić się, że wiadomość e-mail nadal wygląda zgodnie z marką w innych klientach pocztowych.

Z czcionkami internetowymi	Z rezerwami

Webflow wykorzystuje czcionki systemowe jako rezerwę dla swoich czcionek internetowych i używa grubości czcionek, aby zapewnić doskonałe wrażenia typograficzne bez względu na to, jaka czcionka się pojawia.

e-mail webflow

Pozostań w marce i bez błędów

Czcionki internetowe to świetny sposób, aby tekst w e-mailach był zarówno oznaczony marką, jak i dostępny. Ale jak widać z tego postu, należy wziąć pod uwagę wiele niuansów. Dlatego równie ważne jest…

Zawsze testuj!

Zrobiliśmy co w naszej mocy, aby przetestować wiele różnych okoliczności, ale Twój ESP może zniekształcić Twój kod w nieoczekiwany sposób. Upewnij się, że przetestowałeś swoje e-maile przed ich wysłaniem, aby upewnić się, że wszystkie Twoje rozwiązania awaryjne działają poprawnie.

Testowe czcionki internetowe QA w Twoich e-mailach

Czy zrobiłeś to dobrze? Dowiedz się dzięki bezpłatnej wersji próbnej Litmusa. Zobacz, jak wyglądają Twoje wiadomości e-mail w ponad 90 klientach, aplikacjach i urządzeniach pocztowych. I utrzymuj reputację swojej marki dzięki bezbłędnym e-mailom.

Rozpocznij bezpłatny okres próbny Litmusa →

Dodanie czcionek internetowych jest tego warte, ponieważ jest to świetne progresywne ulepszenie, które pomoże Ci zapewnić najlepsze wrażenia dla subskrybentów w ich skrzynkach odbiorczych. Baw się dobrze! Daj nam znać, jeśli masz jakieś pytania lub komentarze poniżej.

Oryginalnie opublikowana 11 kwietnia 2019 r. przez Jainę Mistry. Ostatnia aktualizacja 23 kwietnia 2021 r.