Cum să găzduiți fonturi locale în WordPress pentru un site web mai rapid

O tipografie frumoasă poate îmbunătăți designul site-ului dvs. web și poate captiva publicul.

Dar, în timp ce ne îmbunătățeam performanța site-ului web, am descoperit că dependența de serviciile de fonturi terțe poate încetini WordPress, afectând experiența utilizatorului și, potențial, afectând SEO-ul dvs.

Am găsit câteva modalități de a evita această problemă. O soluție este să găzduiești fonturile local.

Prin preluarea controlului asupra fișierelor dvs. de fonturi, site-ul dvs. poate sări peste acești pași suplimentari de încărcare, asigurând un site web extrem de rapid, cu o experiență mai bună pentru utilizator și SEO.

În acest articol, vă vom arăta cum să găzduiți fonturi locale în WordPress, permițându-vă să îmbunătățiți tipografia site-ului dvs. menținând în același timp performanța optimă.

De ce să găzduiești fonturi local în WordPress?

În timp ce tipografia și fonturile personalizate pot îmbunătăți estetica generală a site-ului web, ele au un impact negativ asupra performanței WordPress. De exemplu, dacă utilizați un font personalizat de la Google Fonts, acesta va fi încărcat de pe servicii terțe, ceea ce va încetini site-ul dvs. web.

Din fericire, există o modalitate de a utiliza fonturi personalizate fără a încetini site-ul dvs. O nouă API Webfonts a fost introdusă în WordPress 6.0. Aceasta vă permite să găzduiți fonturi local, astfel încât acestea să se încarce mai repede.

Un alt motiv pentru a găzdui Google Fonts local este pentru a fi conform cu GDPR. Aceasta este o considerație legală importantă dacă aveți vizitatori pe site din Uniunea Europeană.

Când cineva vizitează un site web care utilizează Google Fonts, adresa sa IP este înregistrată de Google atunci când fonturile sunt încărcate. Deoarece acest lucru se face fără permisiunea lor, UE consideră acum că este o încălcare a reglementărilor privind confidențialitatea și puteți fi răspunzător pentru daune.

Acestea fiind spuse, să vedem cum să găzduim fonturi locale în WordPress pentru un site web mai rapid. Vom acoperi două metode, iar prima metodă este recomandată pentru majoritatea utilizatorilor.

1. Găzduirea fonturilor locale în WordPress cu un plugin
2. Găzduirea fonturilor locale în WordPress manual
3. Ghiduri Experte despre Fonturi în WordPress

Metoda 1: Găzduirea fonturilor locale în WordPress cu un plugin

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul OMGF (Optimize My Google Fonts). Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

OMGF este unul dintre cele mai bune pluginuri de tipografie WordPress. Oferă o modalitate prietenoasă pentru începători de a îmbunătăți performanța și conformitatea GDPR prin găzduirea locală a fonturilor Google.

La activare, trebuie să vizitați Setări » Optimizare Google Fonts pentru a configura pluginul. Ar trebui să vedeți fila „Optimizare Fonturi”.

Observați afirmația de sub antetul „Optimizează Google Fonts” conform căreia trebuie doar să utilizați setările implicite pentru a înlocui automat Google Fonts cu copii găzduite local.

Asta înseamnă că, pe măsură ce derulați în jos pe pagina de setări, tot ce trebuie să faceți este să vă asigurați că opțiunea „Font-Display Option” are setarea implicită „Swap (recomandat)” selectată.

Tot ce trebuie să faceți acum este să faceți clic pe butonul „Salvare și optimizare” din partea de jos a paginii.

Veți vedea un mesaj în partea de sus a ecranului care spune „Optimizare finalizată cu succes”.

Felicitări! Google Fonts sunt acum găzduite local. Site-ul dvs. web se va încărca mai repede și ați redus riscul de procese europene.

Metoda 2: Găzduirea fonturilor locale în WordPress manual

De asemenea, puteți găzdui fonturi local, fără a utiliza un plugin, folosind metoda @font-face din ghidul nostru despre cum să adăugați fonturi personalizate în WordPress. Deși această metodă necesită mai multă muncă, vă permite să utilizați orice font doriți pe site-ul dvs. web.

Trebuie să descărcați fonturile pe care doriți să le utilizați într-un format web. Există multe locuri unde puteți găsi fonturi web gratuite excelente, cum ar fi Google Fonts, Typekit, FontSquirrel și multe altele.

Dacă nu aveți formatul web pentru fontul dvs., îl puteți converti folosind generatorul Webfont FontSquirrel.

Acum trebuie să stocați fonturile pe serverul dvs. de găzduire WordPress. Puteți încărca fișierele folosind FTP sau folosind Managerul de fișiere al cPanel al gazdei dvs.

Ar trebui să creați un nou folder numit „fonts” în directorul temei dvs. sau temă copil și să-l încărcați acolo.

După ce ați încărcat fontul, trebuie să încărcați fontul în foaia de stil a temei dvs. folosind CSS personalizat. Puteți adăuga codul direct în fișierul style.css al temei dvs. sau utilizând secțiunea CSS suplimentar a personalizatorului de temă.

Puteți face acest lucru folosind o regulă CSS3 @font-face de genul acesta:

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Nu uitați să înlocuiți familia de fonturi și URL-ul cu ale dvs.

După aceea, puteți utiliza acel font oriunde în foaia de stil a temei dvs. sau în secțiunea CSS suplimentar a personalizatorului de temă. CSS-ul pe care îl utilizați va depinde de tema dvs. și de locul unde doriți să utilizați fontul local. Iată un exemplu de pe site-ul nostru demo:

h1 {
font-family: Arvo, Arial, sans-serif;
}

După cum puteți vedea, antetul nostru folosește acum fontul Arvo găzduit local.

Ghiduri Experte despre Fonturi în WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să găzduiți fonturi locale în WordPress pentru un site web mai rapid. De asemenea, ați putea dori să vedeți alte ghiduri legate de utilizarea fonturilor în WordPress:

• Ce este un font sigur pentru web + 19 cele mai bune fonturi sigure pentru web
• Cum să schimbați fonturile în tema dvs. WordPress (moduri ușoare)
• Cum să schimbi ușor dimensiunea fontului în WordPress
• Cum să adaugi fonturi personalizate în WordPress
• Cum să faci Google Fonts prietenos cu confidențialitatea
• Cum să dezactivați Google Fonts pe site-ul dvs. WordPress
• Cum să adăugați cu ușurință fonturi cu pictograme în tema dumneavoastră WordPress
• Cele mai bune pluginuri de tipografie WordPress pentru a-ți îmbunătăți designul

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.