Ai schimbat fontul site-ului. Ce se descarcă acum din altă țară

Un cabinet stomatologic din Timișoara și-a schimbat fontul de pe site într-o după-amiază. Rezultatul a arătat bine pe ecranul designerului. Pe telefonul unui pacient, prima jumătate de secundă din fiecare pagină era goală: textul apărea abia după ce browserul termina de descărcat fontul de pe un server aflat în altă țară. Iar în politica de confidențialitate nu scria nimic despre asta, pentru că nimeni nu se gândise că un font transmite date.

Schimbarea unui font pe WordPress e una dintre acele operațiuni care par banale până când te uiți ce se întâmplă în browserul vizitatorului. Sunt patru moduri de a face lucrul ăsta, iar diferența dintre ele nu e de dificultate, ci de ce lași în urmă.

Cele patru trasee, de la cel mai simplu la cel mai controlat

Din editorul de site, dacă ai o temă modernă. Temele bazate pe blocuri au un panou de stiluri globale, la Aspect, apoi Editor. Acolo alegi familia de font pentru titluri și pentru textul curent, dintr-o listă pe care tema o pune deja la dispoziție. E cea mai curată variantă: setarea rămâne în tema copil, nu depinde de niciun plugin, iar la actualizare nu se pierde.

Din personalizatorul temei, dacă ai o temă clasică. Multe teme comerciale au o secțiune de tipografie unde setezi separat titlul site-ului, meniul, headingurile și corpul textului. Funcționează, dar te leagă de temă: dacă schimbi tema peste doi ani, setările pleacă odată cu ea.

Cu un plugin dedicat. Există pluginuri care aduc peste o mie de familii de fonturi și le aplică pe zone de conținut, fără să scrii o linie de cod. Sunt utile când tema nu îți dă control, dar adaugă încă un plugin de întreținut și, în majoritatea cazurilor, încarcă fonturile de pe serverele furnizorului.

Din cod, în tema copil. Înregistrezi fișierul de font în functions.php și îl aplici prin CSS. E singura variantă în care controlezi exact ce fișiere se descarcă, de unde și în ce ordine.

De ce fontul găzduit local e aproape întotdeauna alegerea corectă

Când fontul vine de la Google Fonts prin metoda implicită, browserul vizitatorului face o cerere separată către un domeniu care nu e al tău. Cererea aceea transmite adresa IP a vizitatorului către un terț, înainte de orice acceptare a cookieurilor, pentru că nu e vorba de un cookie, ci de o simplă conexiune de rețea. În ianuarie 2022, un tribunal din München a dat câștig de cauză unui reclamant exact pe motivul ăsta, iar decizia a schimbat practica multor agenții europene. Nu e o interdicție și nu e o lege românească, dar e un risc pe care îl elimini gratuit.

Găzduirea locală rezolvă și partea de viteză. Fișierul vine pe aceeași conexiune cu restul paginii, deci dispare o rundă de rezolvare a domeniului și de negociere a conexiunii securizate. Pe o conexiune mobilă slabă, din afara orașului, diferența se simte.

Procedura, pe scurt: descarci familia de font într-un pachet care conține fișiere în format woff2, le urci într-un folder al temei copil, le înregistrezi cu regula @font-face și adaugi font-display: swap, ca textul să se afișeze cu un font de rezervă până se încarcă al tău. Fără proprietatea aceea, unele browsere țin textul invizibil câteva sute de milisecunde.

Câte fonturi și câte grosimi, concret

Regula practică pe care o aplicăm la proiectele noastre: două familii de fonturi pe tot site-ul, una pentru titluri și una pentru text, plus maximum patru grosimi în total. Fiecare grosime e un fișier separat. O familie cu opt grosimi și opt variante cursive înseamnă șaisprezece fișiere pe care browserul le poate cere.

Formatul contează la fel de mult. Woff2 e comprimat mai bine decât variantele mai vechi și e recunoscut de toate browserele actuale. Dacă pachetul descărcat conține și fișiere în formate vechi, le poți lăsa deoparte fără să pierzi pe nimeni.

Ce se strică, de obicei, după schimbarea fontului

Trei lucruri se rup previzibil, iar dacă le verifici imediat te scutești de reclamații peste o lună.

• Diacriticele. Nu orice font are ș și ț cu virgulă jos. Unele le desenează cu sedilă, adică ș și ț, care sunt alte caractere. Altele nu le au deloc, iar browserul le înlocuiește cu litere dintr-un font de rezervă, ceea ce se vede ca o inconsecvență ciudată în mijlocul cuvântului. Verifici cuvintele „știi”, „față”, „conținut” și „ședință” înainte de a publica.
• Butoanele și meniul. Un font mai lat sparge butoanele cu text scurt și rupe meniul pe două rânduri la lățimi intermediare de ecran, între telefon și calculator, exact acolo unde nimeni nu se uită.
• Facturile și documentele generate. Dacă magazinul tău generează facturi în format PDF, acelea folosesc alt mecanism de fonturi. Schimbarea de pe site nu se propagă acolo, iar dacă cineva încearcă să o forțeze, diacriticele din PDF dispar primele.

Cum verifici că ai făcut treaba corect

Deschizi site-ul, apeși F12 pentru a intra în uneltele de dezvoltare ale browserului, mergi la fila de rețea și reîncarci pagina. Filtrezi după fonturi. Ce vezi acolo e adevărul: câte fișiere se descarcă, de unde vin și cât cântăresc. Dacă apare un domeniu care nu e al tău, fontul nu e găzduit local, oricât ar spune setarea din panou.

Al doilea test se face pe telefon, pe date mobile, nu pe rețeaua fără fir de la birou. Încarci o pagină de articol și te uiți dacă textul apare imediat, chiar și cu un font provizoriu, sau dacă rămâne o pauză albă. A doua situație înseamnă că font-display lipsește.

Cum te poate ajuta Emblematic

Tipografia unui site nu e o preferință estetică, e o decizie tehnică cu efecte în viteză, în conformitate și în felul în care se citește textul pe telefon. La site-urile pe care le construim, fonturile sunt găzduite local din prima zi, cu numărul minim de fișiere și cu diacriticele verificate cuvânt cu cuvânt.

Dacă vrei să treci fonturile site-ului tău pe găzduire proprie sau să afli de ce paginile tale întârzie la afișarea textului, echipa Emblematic.ro este disponibilă pentru o consultație fără obligații. Contactează-ne și stabilim împreună pașii următori.