Obecnie obsługa niestandardowych fontów w klientach poczty ogranicza się do Apple Mail na iOS/macOS. Pamiętaj o tym i projektuj e-maile tak, aby niestandardowe fonty były tylko „stopniowym ulepszeniem” (progressive enhancement).
Poradnik wideo: osadzanie niestandardowych fontów webowych w e-mailach HTML eksportowanych z Figmy
Ten film pokazuje, jak osadzić niestandardowe fonty webowe (z bezpiecznymi fontami zapasowymi) w e-mailach HTML eksportowanych z Figmy za pomocą wtyczki Emailify.
Osadzanie niestandardowych fontów webowych przez adres URL
Jeśli używasz niestandardowych fontów, musisz dodać link bezpośrednio do adresu URL pliku fontu .woff lub .woff2. Zrobisz to, klikając przycisk Configure Fonts w panelu Preview wtyczki.
Możesz tam wkleić link do każdego niestandardowego fontu użytego w projektach e-maili (na przykład https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), który zostanie dodany do eksportowanego HTML jako reguła CSS @font-face.
Upewnij się, że linkujesz bezpośrednio do pliku fontu webowego .woff lub .woff2. Jeśli masz tylko link do osadzenia CSS, otwórz go w przeglądarce – powinien tam być link url do pliku fontu (na przykład https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), który możesz skopiować i wkleić do wtyczki.
Osadzone niestandardowe fonty działają tylko w Apple Mail na iOS/macOS. Obecnie obsługa niestandardowych fontów w klientach poczty ogranicza się do Apple Mail na iOS/macOS. Pamiętaj o tym i projektuj e-maile tak, aby niestandardowe fonty były tylko „stopniowym ulepszeniem” (progressive enhancement).
Ustawianie i podgląd bezpiecznych fontów zapasowych
Jeśli używasz w e-mailach niestandardowych fontów, dla każdego z nich możesz ustawić bezpieczny font zapasowy. Wyświetli się on zamiast fontu niestandardowego, gdy e-mail HTML jest oglądany w klientach poczty, które nie obsługują niestandardowych fontów.
W tym samym panelu ustawień Configure Fonts możesz też określić fonty zapasowe dla fontów Google i fontów niestandardowych.
Jeśli ustawisz bezpieczne fonty zapasowe dla niestandardowych fontów webowych w e-mailu, możesz podejrzeć, jak będą wyglądać, włączając przełącznik Show Fallback Fonts na dole okna podglądu Emailify.
Lista bezpiecznych fontów zapasowych
Poniżej znajdziesz bezpieczne fonty, które możesz ustawić dla niestandardowych fontów webowych użytych w projektach e-maili w Figmie. Osadzone niestandardowe fonty działają tylko w Apple Mail na iOS/macOS, więc wybrany font zapasowy decyduje o tym, jaki font zobaczą odbiorcy we wszystkich pozostałych klientach poczty (na przykład w Outlooku, Gmailu itd.), które niestety nie obsługują niestandardowych fontów.
Bezpieczne fonty zapasowe bezszeryfowe (Sans-Serif)
- Arial
- Arial Black
- Tahoma
- Trebuchet MS
- Verdana
Bezpieczne fonty zapasowe szeryfowe (Serif)
- Georgia
- Times New Roman
Bezpieczne fonty zapasowe o stałej szerokości (Monospace)
- Courier New
Fonty Google w e-mailach
Emailify automatycznie dodaje do eksportów HTML kod @import fontów Google dla wszystkich warstw Figmy, które używają fontu z biblioteki Google Fonts dostępnej domyślnie w Figmie.
Pamiętaj, że fonty Google będą widoczne tylko w klientach poczty, które obsługują @font-face w e-mailach. W klientach, które nie obsługują niestandardowych fontów, automatycznie zostanie załadowany bezpieczny font zapasowy (na przykład „Arial”, „Georgia” lub „Courier”).
Fonty Google działają tylko w Apple Mail na iOS/macOS. Obecnie obsługa niestandardowych fontów w klientach poczty ogranicza się do Apple Mail na iOS/macOS. Pamiętaj o tym i projektuj e-maile tak, aby niestandardowe fonty były tylko „stopniowym ulepszeniem” (progressive enhancement).
Niestandardowe fonty w obrazach. Jeśli niestandardowy font musi wyglądać tak samo we wszystkich klientach poczty, warto umieścić warstwy tekstowe w ramce „Image”. Taki tekst zostanie wyeksportowany jako część obrazu, więc jego poprawne wyświetlanie nie będzie zależeć od obsługi niestandardowych fontów webowych.