Cum să adăugați un font offline pe site-ul dvs. WordPress

Publicat: 2022-10-31

Dacă doriți să adăugați o personalitate suplimentară site-ului dvs. WordPress, atunci vă recomandăm să luați în considerare încărcarea unui font offline. Deși există multe modalități de a face acest lucru, vă vom arăta una dintre cele mai ușoare metode folosind Font Squirrel Webfont Generator. Odată ce ați descărcat fișierele cu fonturi , le puteți încărca pe site-ul dvs. WordPress și le puteți utiliza la fel ca orice alt font. Să începem!

Acest articol stătea pe biroul meu de ceva vreme și am vrut să vi-l împărtășesc. Fonturile Google sunt complet încărcate local. Până acum am folosit fonturile Google Oswald și Lato de la Crunchify.com. Pur și simplu deschideți adresa URL din imaginea de mai sus care apare în noua filă și veți observa că a generat 14 fonturi noi . Acest tutorial vă va ajuta și dacă aveți oricare dintre următoarele întrebări. După ce ați extras fișierul Lato.zip, veți putea vedea toate cele zece fonturi Lato cu extensia.ttf. Pe majoritatea site-urilor web, aveți nevoie doar de fonturi obișnuite, aldine și italice.

În pasul 2, acum trebuie să vă convertiți fonturile în formatele woff2, eot, svg, ttf și wof. Un fișier poate fi încărcat pe site- ul https://Font-Converter.net/en care va converti fontul în aceste formate. Nu mai trebuie spus nimic. Acum puteți încărca fonturi din sistemul dvs. de fișiere local.

Cum adaug fonturi personalizate la tema WordPress?

Imagine de: pinimg.com

Există câteva moduri diferite prin care puteți adăuga fonturi personalizate la tema dvs. WordPress. O modalitate este să utilizați biblioteca Google Fonts. Puteți găsi o listă cuprinzătoare a tuturor fonturilor disponibile pe site-ul Google Fonts. După ce ați găsit un font care vă place, puteți adăuga codul în foaia de stil a temei dvs. (style.css). De exemplu, dacă doriți să utilizați fontul „Open Sans”, ați adăuga următorul cod în foaia de stil: body { font-family: 'Open Sans', sans-serif; } O altă modalitate de a adăuga fonturi personalizate la tema dvs. WordPress este să utilizați un plugin precum Easy Google Fonts . Acest plugin facilitează adăugarea fonturilor personalizate la tema dvs. fără a fi nevoie să editați niciun cod.

Pluginul Easy Google Fonts poate fi folosit pentru a adăuga fonturi personalizate pe site-ul dvs. WordPress. Folosind această metodă, veți putea atrage atenția asupra site-ului dvs., folosind o gamă largă de fonturi. S-a demonstrat că tipografia are o serie de beneficii în cercetare. Un site simplu facilitează comunicarea cu dvs. clienților. Folosind proprietățile CSS, puteți modifica stilul și poziționarea fontului preferat, pe lângă schimbarea stilului și poziționării acestuia. Pe lângă propriile controale pentru fonturi, puteți utiliza pagina de setări a pluginului WordPress pentru a le adăuga. Dacă nu doriți să utilizați un plugin, îl puteți folosi pe acesta în loc de fonturile Adobe.

Instalați pluginul Custom Adobe Fonts pentru a simplifica încorporarea acestor fonturi în site-ul dvs. WordPress. Instalați pluginul, apoi navigați la biblioteca vastă de fonturi Adobe pentru a găsi un font care să funcționeze pentru dvs. (trebuie să vă înregistrați pentru a-l utiliza). După ce ați ales un font, faceți clic pe el și apoi căutați în colțul din dreapta sus al paginii pentru „Adăugați la proiectul web”. Folosind Font Pair, puteți vedea cum arată combinațiile dvs. de fonturi și puteți combina și potrivi fonturile în funcție de ceea ce vedeți. Există câteva site-uri web excelente care vând fonturi personalizate care au fost create chiar de designer. O bibliotecă mare de fonturi este inclusă cu fontul Squirrel și este, de asemenea, simplu de implementat. Puteți utiliza setul de fonturi web de la @Font-Face.

Site-ul dvs. WordPress ar trebui să fie acum gata de utilizare. Setul include fișierul cu fonturi, precum și o foaie de stil care conține codul de care veți avea nevoie pentru a vă crea propria foaie de stil CSS. De exemplu, ar trebui să folosim următorul CSS pentru fontul web OpenSans-ExtraBold. Cea mai bună soluție este să salvați toate fișierele cu fonturi într-o locație pe care o alegeți.

Cum să încărcați fonturile Google în WordPress

Navigați la panoul de administrare WordPress și selectați Adăugați nou. Descărcați și instalați Easy Google Fonts din Google Play Store. După instalarea pluginului, trebuie să faceți clic pe butonul Activare pentru a începe să îl utilizați.

Pe site-ul dvs. web sau pe produsele digitale, puteți utiliza Fonturile Google pentru a experimenta peste 1000 de familii diferite de fonturi. Dacă doriți să adăugați manual fonturi Google pe site-ul dvs. WordPress, există mai multe opțiuni. Sunt gratuite și open source, deci pot fi folosite de orice dezvoltator. Cea mai convenabilă modalitate de a integra fonturile Google este să includeți un fragment cu adresa URL a familiei de fonturi specifice în fișierul functions.php. Dacă vi se pare dificil procesul manual, puteți utiliza un plugin. Puteți instala mai întâi pluginul vizitând depozitul de pluginuri WordPress. Acum trebuie instalat și activat.

Majoritatea temelor WordPress includ integrarea fonturilor Google ca parte a setărilor lor implicite. Pluginurile care compun platforma OMGF vă permit să răsfoiți peste 600 de fonturi pe site-ul dvs. În meniul derulant „Familie de fonturi”, puteți selecta dintre peste 100 de tipuri diferite pentru diferite secțiuni ale site-ului dvs. Există mai multe opțiuni pentru adăugarea de comenzi personalizate pentru fonturi , așa cum se arată în previzualizarea personalizării.

Ar trebui să încarc fonturile Google local WordPress?

Dacă site-ul dvs. WordPress are erori Google Font, ar trebui să încărcați fonturile Google local pentru a le rezolva. Există câteva resurse și scripturi externe pe care nu le puteți controla, ceea ce face imposibilă comprimarea, minimizarea sau optimizarea acestora. Viteza dvs. WordPress va fi grav îngreunată dacă nu luați aceste măsuri de precauție.

Wp-conținut/teme/tema-voastră/fonturi

Dosarul wp-content/themes/your-theme/fonts este locul în care puteți stoca orice fonturi personalizate pe care doriți să le utilizați cu tema dvs. Fonturile pot fi adăugate în acest folder prin FTP sau folosind un plugin de gestionare de fișiere. Odată ce fonturile sunt adăugate în acest dosar, acestea pot fi utilizate în CSS-ul temei dvs., făcând referire la numele fontului.

Stilurile globale pot fi folosite pentru a schimba fontul site-ului dvs. dacă acesta utilizează una dintre următoarele teme. În acest caz, fonturile de bază și de titluri sunt în aceeași pereche de fonturi. Pentru a salva noile perechi de fonturi, faceți clic pe butonul Publicare din meniul Stiluri globale sau faceți clic pe Resetare pentru a anula modificările. După ce ați ales fonturile personalizate adecvate, le puteți schimba ori de câte ori doriți. Dacă doriți să modificați dimensiunea titlului sau a fonturilor de bază, puteți face acest lucru selectând opțiunea de dimensiune de mai jos și în dreapta fiecărui font, apoi selectând o dimensiune din meniul derulant. Cu CSS personalizat, puteți modifica dimensiunea globală implicită a fontului. Asigurați-vă că dezactivați sau ștergeți un plugin dacă decideți să nu îl mai utilizați după ce îl testați. Nu este posibil să conectați un cont Typekit.com la un blog sau site web WordPress.com. Dacă doriți să testați compatibilitatea unui anumit font cu o anumită limbă, utilizați Personalizatorul.

Adăugați fonturi la WordPress fără plugin

Există câteva moduri de a adăuga fonturi la WordPress fără un plugin. O modalitate este să utilizați biblioteca Google Fonts. Pur și simplu accesați site-ul Google Fonts, selectați fontul pe care doriți să îl utilizați și apoi copiați codul furnizat. Apoi, deschideți tabloul de bord WordPress și accesați Aspect > Personalizare. Apoi, faceți clic pe fila „CSS suplimentar” și inserați codul pe care l-ați copiat din Fonturi Google. Salvați modificările și noul font va fi aplicat site-ului dvs. web.

Temele nu trebuie să includă fonturi web în setările lor implicite. În timp ce navighezi pe o pagină web, o vei putea descărca folosind browser-ul tău. Pentru a copia și a lipi codul fonturilor în fișierul temă, alegeți pur și simplu fontul dorit. Puteți utiliza mai multe fonturi în același timp și veți vedea cât timp se încarcă fonturile. Adăugați mai multe CSS blogului dvs. WordPress accesând tabloul de bord al blogului WordPress. Copiați întregul cod din caseta gri 1 în fontul web al textului. Noua familie de fonturi web poate fi găsită în a doua casetă gri a bibliotecii de fonturi Google . În plus, următorul cod poate fi folosit pentru a ajusta dimensiunea și greutatea fontului.