Fonturi web: cum să le faci să funcționeze perfect în e-mail

Publicat: 2021-04-24

Din studiul meu foarte științific (am observat-o pe fiica mea când a început să scrie rapoarte în ultimul an), am învățat că unul dintre primele aspecte ale designului cu care oamenii încep vreodată să se joace este tipografia. Când începeți să scrieți rapoarte, petreceți ore întregi încercând să găsiți cel mai bun font de utilizat. Ok, poate nu ore, dar majoritatea oamenilor petrec puțin timp pe asta. Pentru că, după cum știu marile mărci, tipografia contează. Și contează în e-mail.

Dar și accesibilitatea contează. Așa că nu mai prindeți mesajul în imagini și începeți să utilizați text live cu fonturi sigure pentru web și fonturi web. La urma urmei, textul care nu depinde de imagini și poate fi citit de un public mai larg duce la o experiență excelentă pentru abonați. Și, în calitate de cei mai buni clienți ai tăi — e-mailul returnează 36 USD pentru fiecare dolar investit — asta este grozav pentru strategia ta generală de marketing.

În această postare pe blog, voi detalia:

Fonturi web versus fonturi sigure pentru web
Beneficiile fonturilor web
Asistență pentru clienți prin e-mail și licențiere
Unde găsiți fonturi web
Codarea lor în e-mailuri
Exemple grozave de fonturi web în e-mail

Fonturi web versus fonturi sigure pentru web

Există două moduri diferite în care puteți face text live: fonturi sigure pentru web și fonturi web. Deși sună la fel, există diferențe clare. Pentru a înțelege aceste diferențe, să aruncăm o privire la modul în care funcționează fonturile în e-mailurile tale.

Când e-mailul dvs. este codificat, fontul este declarat folosind o proprietate CSS numită font-family. Această proprietate a familiei de fonturi poate avea un singur nume de font sau mai multe nume de fonturi, adesea denumite stivă de fonturi. Includerea mai multor nume de font vă asigură că, dacă un font nu funcționează, există un font alternativ sau de rezervă, la alegerea dvs. Fără a enumera mai multe nume de fonturi, clientul de e-mail poate decide fontul de rezervă. Când abonații vă deschid e-mailul, browserul citește proprietatea familiei de fonturi și trage fontul pentru a-l utiliza.

Fonturi sigure pentru web

Cu fonturi sigure pentru web, browserul extrage fontul din directorul local de fonturi. Aceasta înseamnă că acestea sunt fonturi care sunt deja instalate pe computer. Toate computerele vin cu fonturi preinstalate, iar acestea sunt ceea ce este considerat sigur pentru web. Acestea sunt sigure , deoarece există o șansă foarte bună de abonat va avea deja ei, de asemenea.

Dezavantajul este că există un număr limitat de fonturi sigure pentru web în comparație cu fonturile web. Și sunt folosite destul de des, așa că este mai puțin probabil să ieși în evidență (dacă asta țintiți).

Fonturile sigure pentru web sunt:

Arial
Helvetica
Verdana
Georgia
Times New Roman

Dar există câteva altele pe care le poți folosi cu un anumit grad de încredere. Așadar, ieși din bucla standard de font Arial sau Helvetica și găsește un font sigur pentru web, care funcționează pentru marca ta.

Cea mai bună resursă pe care am găsit-o pentru fonturile sigure pentru web este Fonturile CSS. Îmi place că includ un procent de utilizare pentru PC-uri și Mac-uri pentru fiecare font, astfel încât să știți aproximativ câți dintre abonații dvs. ar putea vedea fontul dorit și câți vă vor vedea alternativ.

Fonturi web

Fonturile web sunt extrase de pe un server, fie unul pe care îl găzduiți dvs., fie unul extern (cum ar fi Google sau Adobe). Din acest motiv, varietatea de fonturi care pot fi utilizate este mult mai mare și pot fi folosite pe orice computer... atâta timp cât browserul sau clientul de e-mail poate introduce fontul. În unele cazuri, abonatul dvs. poate avea deja un web font descărcat și instalat pe computerul lor, astfel încât aceste fonturi vor funcționa chiar și în clienții de e-mail care nu acceptă fonturi web!

Deci, în timp ce fonturile web vă oferă mult mai multă varietate și libertate creativă, ele au un cost: suport limitat pentru clientul de e-mail (în care mă aprofundez mai jos).

De ce fonturi web?

Deci s-ar putea să vă întrebați, de ce să vă deranjați cu fonturile web? În calitate de marketer și designer, cunoașteți presiunea de a rămâne pe brand în e-mail cu culori, design și — da — tipografie. Fonturile web vă permit să vă prezentați marca fără a vă baza pe imagini pentru textul dvs.

Blocarea unei copii importante în imagini a fost o practică standard în designul de e-mail, ca o modalitate de a rămâne pe brand și de a fi creativ. Dar „ascunderea” textului din imagini limitează accesibilitatea e-mailului, deoarece cititorii de ecran nu pot citi textul de pe imagine.

Exemplu de e-mail Ace Hardware de fonturi web cu și fără imagini — E-mail cu și fără imagini atunci când utilizați un font web

Exemplu de e-mail Magic Spoon de fonturi web cu și fără imagini — E-mail cu și fără imagini atunci când utilizați text în imagini

Și, dacă aveți text în imaginile dvs., dăunează experienței abonaților dacă au imaginile dezactivate în mod implicit. Este posibil ca aceasta să nu fie o mare parte a abonaților tăi, dar chiar nu există nicio modalitate de a ști dacă cineva are imaginile dezactivate și deschide e-mailul tău. Deci, de ce să nu oferi cea mai bună experiență pentru cel mai larg public posibil?

Fonturile web deschid noi căi de creativitate în tipografie, permițând designerilor de e-mail să fie creativi și accesibili – și să rămână la aspectul mărcii lor.

Pot folosi fonturi web în e-mail?

Dacă nu ai ghicit deja, răspunsul este da! Dar, ca și în toate lucrurile prin e-mail, există avertismente.

Asistență client prin e-mail

Fonturile web funcționează doar în unii clienți de e-mail și trebuie avut grijă să vă asigurați că acolo unde nu sunt acceptate, fontul cade înapoi cu grație.

Client de e-mail	Suport pentru fonturi web
Apple Mail	✓ Da
Outlook 2007-2016	✘ Nu
Outlook 2019	✘ Nu*
Outlook pentru Mac	✓ Da
Outlook Office 365	✘ Nu*
Aplicația Gmail	✘ Nu*
iOS	✓ Da
Aplicația Outlook	✘ Nu
Samsung Mail	✘ Nu*
AOL Mail	✘ Nu
Gmail	✘ Nu*
Office 365	✘ Nu
Outlook.com	✘ Nu
Yahoo! Poștă	✘ Nu

*Are unele rezultate neplăcute în funcție de metoda de încorporare a e-mailului, discutată mai târziu.

Merită să aruncați o privire la baza dvs. de abonați pentru a vedea câți vă văd e-mailurile într-un client de e-mail care acceptă fonturi web. Dacă sunt suficienți dintre abonații tăi, atunci este o modalitate minunată de a-ți oferi e-mailului o notă suplimentară.

Dacă majoritatea nu sunt, pur și simplu nu ar merita timpul și efortul dvs., mai ales dacă vă gândiți să utilizați un font web plătit.

Ce clienți de e-mail folosesc abonații tăi ?

Aflați unde vă deschid abonații e-mailurile și cum interacționează, cu Litmus Email Analytics. Obțineți informațiile de care aveți nevoie pentru a vă optimiza e-mailurile și nu numai.

Aflați mai multe →

Licențiere

Fonturile web au fost concepute inițial pentru a fi utilizate exclusiv pe site-uri web, astfel încât licențele lor sunt de obicei utilizate numai pe site-uri web și aplicații mobile. Motivul pentru care multe servicii de fonturi web nu au permis utilizarea în e-mail este că acesta este considerat ca distribuirea fontului, ceea ce contravine Acordului de licență pentru utilizatorul final (EULA) al multor servicii.

Toți furnizorii de fonturi web pe care i-am contactat au acceptat utilizarea fonturilor lor în e-mail. Fiecare furnizor avea o licență diferită care era necesară, așa că nu există un mod standard în care fonturile sunt licențiate în e-mail. Dacă doriți să utilizați un font, contactați compania pentru a afla exact cum își licențiază fonturile.

Unde găsiți fonturi web

Așa că ați gândit totul și ați decis că doriți să încercați fonturile web. Cu opțiuni aparent nesfârșite, le puteți găsi pe cele care să se potrivească mărcii dvs. Dar este, de asemenea, important să țineți cont de accesibilitate.

Unele fonturi sunt mai ușor de citit decât altele.

Fonturile ornate sau decorative, cum ar fi fonturile de afișare sau de scris de mână, pot face dificil pentru persoanele cu deficiențe de vedere sau dislexie să facă diferența dintre formele literelor. Fonturile sans-serif (fonturi fără caracteristici extinse sau bucle în literele lor, cum ar fi Arial, Calibri, Century Gothic sau Helvetica) și fonturile slab (fonturi cu linii mai groase, cum ar fi Museo Slab și Rockwell) sunt considerate mai accesibile.

Iată câteva locuri bune în care să începeți să căutați.

Fonturi Google

Există o mulțime de servicii de fonturi web disponibile, dar Google Fonts este preferatul nostru. Serviciul este complet gratuit și puteți descărca fonturile web pe computer dacă faceți joc de modele în Adobe Photoshop, Sketch sau alt software de design.

Fonturi Adobe

Typekit a devenit Adobe Fonts din octombrie 2018. Aceștia acceptă acum atât metoda <link>, cât și metoda @import pentru utilizarea fonturilor ca fonturi web (mai multe despre asta în continuare). Serviciul nu este complet gratuit, dar dacă aveți deja un abonament Creative Cloud, este inclus cu acesta.

Servicii de fonturi web

Există mai multe alte servicii de fonturi web disponibile pe bază de plată. Va trebui să vă asigurați că obțineți licența corectă pentru a le folosi în e-mailul dvs.

Tip Rețea (licență web)
Tip de proces Turnătorie (licență web)
Optimo (licență pentru anunțuri digitale)
Fontspring (licență de e-mail personalizată)
Typotheque (licență web)
Tip de producție (licență de publicitate online)
MyFonts (licență web)
Tip comercial (licență web)

Cu licențele web, poate exista posibilitatea de a găzdui fontul singur sau de a avea fontul găzduit de furnizor. În unele licențe web, plătiți pentru o anumită cantitate de vizualizări de pagină cu fiecare e-mail care încarcă fontul numărând ca vizualizare de pagină, așa că asigurați-vă că luați în considerare acest lucru atunci când achiziționați o licență.

Cum să încorporați fonturi web în e-mailuri

Deoarece fonturile web de obicei nu se găsesc pe dispozitivul local al cuiva și sunt găzduite în altă parte, mai întâi trebuie să „încorporați” sau să importați fontul web în e-mailurile dvs. înainte de a le putea folosi efectiv.

1. Obțineți adresa URL a fișierului fontului dvs

Veți avea nevoie de adresa URL a fontului dvs. web pentru a o apela în e-mailul dvs. Serviciul dvs. de fonturi web ar trebui să aibă această adresă URL. Dar dacă găzduiți singur fișierul cu font, obțineți adresa URL de unde se află fontul web pe serverul dvs. Asigurați-vă că este o adresă URL publică și nu provine de la un server local. În caz contrar, abonații dvs. nu vor putea accesa fontul web și vor vedea în schimb un font alternativ.

Dacă utilizați Fonturi Google, găsirea adresei URL este puțin dificilă, dar nu prea dificilă. Aflați cum în pasul următor pentru metoda de încorporare @font-face.

2. Importați fontul web utilizând una dintre cele trei metode

Există trei metode pentru încorporarea fonturilor web în e-mail (și o avertizare care poate limita metoda pe care o puteți utiliza). Cele trei metode de încorporare a fontului sunt:

<link>
@import
@font-face

Deci de ce ai alege o metodă în detrimentul alta?

Metoda @import amână încărcarea fontului web care este importat până când HTML-ul în care este încorporat este încărcat complet. Acest lucru poate face ca fontul dvs. web să dureze ceva mai mult să apară în e-mail, în timp ce restul e-mailului este încărcat. În schimb, metoda <link> încarcă resursa în linie pe măsură ce se citește codul fișierului HTML (de sus în jos), ceea ce ar putea întârzia încărcarea e-mailului dacă fișierul cu fonturi web este deosebit de mare.

Un alt lucru de care trebuie să țineți cont atunci când alegeți o metodă de utilizat este ceea ce acceptă ESP.

Puteți crea un cod frumos care funcționează în Litmus toată ziua, dar dacă ESP vă schimbă codul, așa cum știm că fac majoritatea, atunci nimic din ce faceți nu va conta. Asigurați-vă că ESP nu vă modifică codul într-un mod care ar face ca fonturile să nu mai funcționeze. La Litmus, ESP-ul nostru nu ne permite să includem condiționale MSO în jurul elementelor de stil. Prin urmare, metodele <link> și @import nu vor funcționa pentru noi, deoarece nu sunt bine acceptate în Outlook, despre care vom discuta mai jos.

Folosind <link>

Folosirea metodei <link> este o metodă relativ simplă pentru încorporarea fonturilor în e-mailul dvs. Plasați această linie de cod în <head> e-mailului dvs., în partea de sus:

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

Folosind @import

Metoda @import este, de asemenea, o metodă relativ simplă. Plasați această linie de cod în <head> al e-mailului dvs. între etichetele <style>:

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

Folosind @font-face

Serviciile de fonturi web online oferă în mod obișnuit cinci formate de fișier din care să alegeți: .eot, .woff, .woff2, .svg și .ttf. Formatele .woff și .woff2 au cel mai bun suport atunci când vine vorba de e-mail, așa că vă sugerăm să utilizați unul sau ambele formate atunci când puteți. Metoda @font-face este singura metodă care vă permite să alegeți în mod specific ce format de fișier doriți să importați, ceea ce o face cea mai rezistentă la glonț pentru implementarea fonturilor web.

Iată o declarație tipică @font-face pentru importarea unui font web în e-mail folosind Fonturi Google ca serviciu de fonturi web ales:

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

Dacă utilizați Google Fonts, găsirea codului @font-face nu este cea mai ușoară, dar nu este prea dificilă.

Mai întâi, trebuie să găsiți fontul pe care doriți să îl utilizați pe Google Font. Apoi, alegeți stilul pe care doriți să îl utilizați. Un meniu derulant va apărea în partea dreaptă.

googe_fonts

În meniul derulant, va exista o alegere pentru <link> sau @import. Ambele vor avea o adresă URL (evidențiată în captura de ecran de mai sus). Puteți copia acea adresă URL și o puteți lipi în bara de adrese a browserului dvs. pentru a găsi foaia de stil CSS pe care o folosește Google.

google_font_api

Copiați și inserați versiunea „latină” a @font-face între etichetele dvs. <style>.

La Litmus, metoda @font-face este implementarea noastră de bază a importului fonturilor web în e-mailurile noastre.

Tot meritul pentru această metodă de importare a fonturilor web îi revine avocatului pentru accesibilitatea prin e-mail, Paul Airy, așa cum este detaliat într-un buletin informativ Type: E.

3. Alegeți fontul alternativ corect

Când utilizați fonturi web, este o necesitate să aveți un font alternativ sigur pentru web pentru acei clienți de e-mail care nu acceptă fonturi web.

Fiecare client de e-mail are un font implicit dacă fontul listat în stiva familiei de fonturi nu este disponibil. De exemplu, Gmail folosește Arial, Apple Mail folosește Helvetica și Outlook folosește Times New Roman. Dacă nu vă place sunetul niciunui dintre aceste fonturi implicite, avem câteva vești bune: puteți alege fontul alternativ atunci când codificați în stiva familiei de fonturi (în pasul următor).

Alegerea fontului alternativ potrivit care păstrează designul e-mailului este cheia pentru a oferi o experiență grozavă tuturor abonaților, indiferent de clientul de e-mail pe care îl folosesc.

Fonturile de rezervă ar trebui să fie de același tip ca fontul web — utilizați un font de rezervă sans-serif dacă fontul dvs. web este un font sans-serif și un font de rezervă serif dacă fontul dvs. web este, de asemenea, un font serif. Folosirea aceluiași stil de font vă va ajuta să păstrați designul e-mailului în diferiți clienți de e-mail.

Puteți face un pas mai departe analizând înălțimea x a fonturilor.

Înălțimea x este înălțimea verticală a fontului. În mod ideal, ar trebui să alegeți un font alternativ care are o înălțime x similară pentru a preveni destrămarea designului dvs. de e-mail atunci când fontul alternativ este utilizat.

exemplu de înălțime x care compară verdana, arial și proxima nova

Iată un exemplu de diferențe subtile de înălțime x dintre fonturile Verdana, Arial și fontul web Proxima Nova. Aceste diferențe subtile pot face toată diferența în realizarea sau distrugerea designului dvs. de e-mail atunci când fonturile web nu sunt randate.

4. Folosiți fonturile în e-mail

Odată ce fontul dvs. web este importat și alegeți alternativele dvs., utilizarea lor în e-mail este la fel de ușoară ca și utilizarea unui font sigur pentru web. Utilizați doar numele familiei de fonturi definit în metoda de import, urmat de fonturile dvs. de rezervă fie în CSS inline, fie în cap:

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

Gândiți-vă la aceasta ca la o listă prioritizată de fonturi preferate. Dacă un client de e-mail nu poate respecta alegerea dvs. numărul unu, va reveni la următoarea din lista dvs.

De exemplu, folosind stiva de familie de fonturi de mai sus, Gmail va ignora primul font din listă, deoarece este un font web care nu este acceptat în Gmail. Deci fontul redat va fi Verdana. Dacă Verdana nu este acceptat pe dispozitivul utilizat (ceea ce ar fi foarte rar deoarece Verdana este un font sigur pentru web), dispozitivul va folosi fontul implicit sans-serif pentru sistemul său, deoarece acesta este al treilea font din listă.

5. Evitați fals bold sau fals italic

Dacă aveți versiuni însoțitoare îndrăznețe și italice ale fișierelor dvs. cu fonturi web, atunci să le folosim!

Designerii de fonturi s-au gândit și au depus mult efort pentru a obține toate stilurile diferite ale unui font corect , așa că este cea mai bună practică să aplicați designul original al tipului, mai degrabă decât să permiteți clientului de e-mail sau browser-ului să aplice la întâmplare un caracter aldin sau cursiv fals pentru fontul obișnuit.

Practic, NU faceți acest lucru:

@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;"

La fel ca designul web, puteți trage fonturile autentice incluzând aceste stiluri în stiva dvs. @font-face, astfel:

@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');
}

După cum puteți vedea, diferitele stiluri introduc fonturi diferite, indiferent de familia de fonturi. În acest fel, dacă stilați fontul în HTML astfel:

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

… apoi va introduce fontul autentic „Roboto-BoldItalic” ! La fel, doar adăugarea font-weight: bold; va trage „Roboto-Bold” și va adăuga doar font-style: italic; va trage în „Roboto-Italic” .

NU faceți nici asta!

Deci, s-ar putea să vă întrebați - de ce să faceți acest lucru în loc să declarați o familie de fonturi diferită pentru fiecare stil, care atrage și fonturile autentice? Cam asa arata:

@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;"

Aceasta prezintă o problemă. Folosirea numelor familiilor de fonturi pentru a stoca stiluri nu numai că creează CSS excesiv de complicat și redundant, dar, de asemenea, elimină stilul textului dacă intervin alternativele. Deci, de exemplu, dacă vizualizați codul de mai sus în Gmail (care nu nu acceptă fonturi web personalizate), atunci veți vedea doar Verdana fără caractere aldine și fără cursive, în loc de Roboto Bold Italic .

Menținând familia de fonturi și greutatea fonturilor sau stilurile de fonturi separate, fonturile de rezervă vor păstra în continuare stilul corect.

6. Utilizați o remediere pentru Outlook

Outlook are o ciudată minunată la care veți dori să fiți atenți. Mai ales dacă asta folosesc mulți dintre abonații tăi.

Vedeți cum arată e-mailurile dvs. în Outlook și multe altele

Fiecare client de e-mail are ciudateniile lui. Din fericire, le puteți vedea în e-mailurile dvs. înainte de a apăsa trimite, cu Litmus Email Previews. Gata cu e-mailurile sparte.

Aflați cum →

Dacă utilizați metoda <link> sau @import, totul înainte de Outlook 2019 va afișa Times New Roman, indiferent de alternativele pe care le-ați introdus pentru fontul dvs.

Cea mai simplă soluție pentru aceasta este utilizarea metodei @font-face. Dar dacă trebuie să utilizați metoda <link> sau @import, atunci utilizați condiționalele Microsoft Office (MSO) pentru a comenta acea secțiune a stilurilor dvs. Acest lucru va împiedica Outlook să le vadă și va folosi fonturile de rezervă așa cum este prevăzut:

Fără condiționale MSO	Cu condiționale 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]-->`

Dar stai un minut. Tocmai am spus totul înainte de Outlook 2019. Deci, ce se întâmplă în Outlook 2019 (și Outlook Office 365)? Ei bine, în acești clienți de e-mail, Outlook revine la soluția dvs. de rezervă chiar și fără condițiile MSO.

Fără condiționale MSO	Cu condiționale 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]-->`

De fapt, la acei clienți, @importul pare să funcționeze de fapt! Dar chiar este? Am încercat-o cu alte fonturi, iar rezultatele au fost aproximativ la egalitate cu ceea ce v-ați aștepta de la Outlook:

testarea fonturilor web în Outlook

Se pare că uneori pune un font de sistem în locul fonturilor pe care le specificați. Și în cazul lui Montserrat, nu sunt sigur ce se întâmplă acolo, dar asta nu este Montserrat. De fapt, seamănă mai mult cu Lato. Deci, se pare că Outlook încearcă să accepte fonturi web, dar nu este încă acolo. Este cu siguranță ceva la care să fii atent în viitor.

Între timp, din motivele de mai sus — și pentru că nu puteți viza doar Outlook 2019 — cel mai bine este să utilizați @font-face sau să ascundeți declarațiile <link> sau @import.

Dacă găsiți că Outlook vă convertește fontul în Times New Roman, puteți adăuga mso-font-alt: „Arial”; la blocul @font-face pentru a oferi o alternativă de rezervă pentru 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');
}

O altă soluție pe care o puteți folosi este codificarea familiei de fonturi cu stiva de fonturi sigure pentru web și includerea unui bloc <style> pentru a înlocui fonturile cu fontul web. Apoi, este doar o chestiune de a ascunde acel bloc de stil din Outlook:

<!--[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. Folosiți o remediere și pentru Gmail (glumesc, nu există una)

Așa că s-ar putea să vă întrebați: „Dar Gmail? Noi folosim fonturi Google după toate.“

Ai crede că, deoarece Gmail este un produs Google și Google Fonts este un produs Google, s-ar juca frumos împreună. Dar, vai, nu este cazul.

Fonturile web nu funcționează în Gmail chiar dacă sunt un font Google și chiar dacă utilizați codul furnizat de Google. Singura excepție pentru aceasta este Roboto:

Utilizarea diferitelor fonturi Google	Folosind diferite metode de încorporare

Și, de fapt, pe aplicația Gmail Mail pe Android, toate fonturile sans-serif revin la Roboto:

Utilizarea diferitelor fonturi Google	Folosind diferite metode de încorporare

Un pic de inspirație pentru a începe

Bine, acum cine este gata să vadă câteva exemple minunate de mărci care folosesc fonturile web în e-mail în mod corect?

Ace Hardware a folosit fonturi web acolo unde acestea sunt acceptate, dar a ales Rockwell ca font de rezervă pentru a se asigura că e-mailul încă arată marca în alți clienți de e-mail.

Cu fonturi web	Cu rezerve

Webflow folosește fonturi de sistem ca alternativă pentru fonturile lor web și folosește ponderea fonturilor pentru a asigura o experiență tipografică excelentă, indiferent de fontul care apare.

e-mail webflow

Rămâneți pe marcă și fără erori

Fonturile web sunt o modalitate excelentă de a păstra textul din e-mailurile dvs. atât de marcă, cât și de accesibil. Dar după cum puteți vedea din această postare, există o mulțime de nuanțe de luat în considerare. De aceea este la fel de important să...

Fii mereu la testare!

Am făcut tot posibilul pentru a testa o grămadă de circumstanțe diferite, dar ESP-ul dvs. poate distorsiona codul într-un mod neașteptat. Asigurați-vă că vă testați e-mailurile înainte de a le trimite pentru a vă asigura că toate alternativele funcționează corect.

Testează QA fonturile web în e-mailurile tale

ai facut-o corect? Aflați cu o încercare gratuită a Litmus. Previzualizați cum arată e-mailurile dvs. în peste 90 de clienți de e-mail, aplicații și dispozitive. Și menține-ți reputația mărcii cu e-mailuri impecabile.

Începeți încercarea gratuită a Litmus →

Adăugarea de fonturi web merită ca o îmbunătățire progresivă excelentă pentru a vă ajuta să oferiți cea mai bună experiență pentru abonații dvs. în căsuțele lor de e-mail. A se distra! Și anunțați-ne dacă aveți întrebări sau comentarii mai jos.

Publicat inițial pe 11 aprilie 2019, de Jaina Mistry. Ultima actualizare 23 aprilie 2021.