Acest articol este potrivit pentru oricine, de la începători până la cei mai experimentați dezvoltatori web. Am văzut Senior Web Developers cu decenii de experiență ignorând fonturile și negestionându-le corespunzător, așa că vă rog citiți mai departe.

După ce citiți câteva rânduri mai jos, veți folosi @font-face și CSS-ul corect care va funcționa pe toate browserele.

Site-ul dumneavoastră va arăta și va funcționa cum trebuie pe toate dispozitivele.

Ce sunt font face-urile?

Presupun că deja știți acest lucru, altfel nu ați citi acest articol.

Totuși, pentru completitudine, un @font-face permite ca fonturi specifice să fie încorporate pe un site web fără ca utilizatorul să fie necesar să le aibă instalate pe sistemul său.

Tipurile de fonturi disponibile sunt: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” și “.svg”.

  • .woff înseamnă Web Open Font Format
  • .woff2 înseamnă WOFF 2.0 - Web Open Font Format
  • .ttf, .otf înseamnă TTF/OTF - TrueType și OpenType
  • .eot înseamnă EOT - Embedded OpenType
  • .svg înseamnă fonturi SVG

Fiecare browser are propriul “suport” pentru aceste tipuri (din păcate), deci trebuie să țineți cont de asta.

Dacă doriți ca paginile dvs. să arate la fel pe toate dispozitivele și browserele, aveți nevoie de toate formatele de mai sus.

Cum să folosești corect Font Face?

Aici e partea complicată, pentru că dacă căutați pe Google, chiar și site-urile de top nu vă vor arăta realitatea dură.

Așa cum am menționat mai sus, fiecare browser are propriul suport pentru fonturi, și dacă doriți ca fontul dvs. să funcționeze pe fiecare browser, trebuie să încărcați tipurile de fonturi necesare și să ajustați CSS-ul în consecință.

De exemplu, dacă verificăm Mozilla , veți observa următoarele:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

Este suficient? Nu, nu va funcționa pe toate browserele. De exemplu, nu va funcționa deloc pe Internet Explorer.

Puteți verifica https://caniuse.com/?search=woff2 și să vă convingeți singuri.

Un alt exemplu, dacă verificăm W3 Schools :

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

Este corect? Tot nu, nu va suporta toate browserele.

Pentru a suporta toate browserele, tipurile de fonturi încărcate și CSS-ul ar trebui să arate astfel:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

Observați comentariile la fiecare tip de font, sunt auto-explicative. Aceasta va suporta toate browserele și fontul dvs. se va afișa corect.

Cum să convertiți și generați tipurile Font Face?

Dacă dezvoltați un site web pentru un client, de obicei vi se va da un singur tip de font. Acesta va fi doar în format .otf sau .ttf, ceea ce nu este suficient.

Aveți nevoie de toate formatele necesare pentru toate browserele, deci va trebui să le convertiți în tipurile @font-face corespunzătoare.

Din fericire, avem instrumente online care fac acest lucru automat și chiar generează CSS-ul corect (am evoluat sau nu).

Convertirea fonturilor plătite/personalizate

Vă recomand să folosiți Transfonter , dar puteți desigur să folosiți pe oricare preferați.

Acest instrument online gratuit va converti fontul și vă va oferi tipuri de fonturi și CSS gata de utilizare:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

Convertirea fonturilor gratuite/open source

Într-un alt scenariu în care clientul nu vă va furniza un font plătit, ci un Google Font gratuit, există un instrument și pentru asta: https://google-webfonts-helper.herokuapp.com/fonts .

Acest instrument va genera de asemenea tipurile și CSS-ul necesare pentru a afișa fonturile corect pe toate browserele.

Vă recomand insistent să inspectați fonturile rezultate în diferite browsere.

Cum să folosești corect Font Families?

Pot paria sigur că nu ați folosit niciodată specificația font family optim. Încărcarea corectă a font face nu este suficientă, trebuie să specificați și fonturi de fallback.

Fonturile de fallback sunt folosite când fontul curent nu este disponibil. Acest lucru se poate întâmpla din mai multe motive, de la o problemă CDN la un timeout de rețea.

Veți observa că majoritatea CMS-urilor au definit fonturi de fallback astfel:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

Este suficient? Nu. Din păcate, fonturile de sistem nu sunt aceleași pe fiecare dispozitiv. Windows are ale sale, Android are ale sale, iOS de asemenea și așa mai departe.

Deci ce să faci? Declară-le corect, verifică cum face Bootstrap :

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Folosind cele de mai sus cu fonturi personalizate, rezultatul ar fi:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Aceasta este o modalitate elegantă de a gestiona fonturile de fallback, asigurându-vă că site-ul web va arăta bine pe toate dispozitivele în timp ce fonturile se încarcă (sau nu se încarcă deloc).

Testarea Font Face și Font Family

Nu vă speriați de cuvântul testare, acesta este un proces foarte simplu dacă lucrați inteligent. Nici măcar nu trebuie să inspectați pagina manual pentru a vedea ce font s-a încărcat (dacă sunteți leneși).

Pe măsură ce tehnologia evoluează, la fel și instrumentele disponibile pentru dezvoltatori; făcând din ce în ce mai ușor să creezi lucruri.

Verificarea dacă @font-face și font-family se încarcă corect este un proces foarte simplu, vedeți mai jos.

Verificarea Font Face și Font Family

  1. Folosiți o extensie de browser pentru a vedea ușor ce font folosește site-ul dvs.:
  1. Editați pagina și “stricați” @font-face, simulând un caz în care fontul personalizat nu se încarcă. Puteți “strica” încărcarea alterând numele fontului sau URL-ul care duce la un font inexistent.
  2. Rezultatul ar trebui să fie primul font care se potrivește cu dispozitivul dvs. ca fallback. De exemplu, pe un dispozitiv Apple, acesta ar trebui să fie “-apple-system”.

Sfaturi și trucuri

  • Folosiți tag-ul HTML link header “preconnect” dacă încărcați fonturi de pe un CDN.
  • La fiecare declarație de font, adăugați font-display: swap; pentru a accelera încărcarea. Aceasta instruiește browserul să folosească fontul de fallback pentru a afișa textul până când fontul personalizat este complet descărcat.
  • Încărcați doar fonturile care sunt efectiv necesare. Am văzut oameni care încarcă 7 tipuri de font din același font, dar folosesc doar unul.
  • Pentru a îmbunătăți viteza paginii, preîncărcați (primul sau necesarul) font folosind HTTP/2. Aceasta va accelera considerabil pagina și va rezolva problema Google PageSpeed “Ensure text remains visible during webfont load”.

Cam asta e tot, sper că acest articol v-a ajutat.