Desigur, există diferite plugin-uri pentru utilizarea fonturilor Google Web pe site-ul dvs. WordPress, dar dacă vă dezvoltați propria temă, poate fi necesar să cuplați strâns tipografia aleasă de ea, ocolind pluginurile. Mai jos vă vom arăta cum să utilizați Google Web Fonts în tema dvs.

Mai întâi, să mergem la site Fonturi web Googleși selectați fontul pe care trebuie să îl aplicăm în temă. Cu ajutorul instrumentelor speciale situate în partea stângă, puteți restrânge zona de căutare, deoarece există într-adevăr o mulțime de fonturi. Știam că am nevoie de un font serif îndrăzneț pentru titluri și titlul blogului, așa că am selectat serif din meniul drop-down Categorii și apoi am mutat glisorul Grosime la dreapta.

În cele din urmă, cele 617 opțiuni care mi s-au oferit au scăzut fără probleme la 5. Aveți destul de multe opțiuni pentru a previzualiza fonturile - puteți vedea cum va arăta un cuvânt, propoziție, paragraf de text sau poster în fontul selectat. Puteți alege text predefinit, puteți seta propriul text, alege dimensiunea fontului dorită.

Odată ce ați găsit fontul pe care doriți să îl utilizați pe site-ul dvs., faceți clic pe butonul Adaugă la colecție.

Puteți adăuga zeci de fonturi la colecția dvs. Cu toate acestea, acest lucru nu este întotdeauna necesar. Doar pentru că poți face asta nu înseamnă că ar trebui. Încercați să vă limitați la maximum trei fonturi. Mai bine, doi. Din motive de performanță, îmi place în continuare să folosesc fontul moștenit sigur pentru web pentru textul de corp al site-ului și să păstrez fonturile web pentru titluri și alte elemente care necesită un accent sau o atenție specială. Fiți atenți la lizibilitatea fonturilor dvs. - nu utilizați un font strigător dacă vizitatorii dvs. nu pot desluși ce este scris.

Când adăugați fonturile la colecție, le veți vedea în secțiunea albastră din partea de jos a site-ului. După ce aveți fonturile pe care doriți să le utilizați în colecția dvs., faceți clic pe butonul Utilizați.

După aceea, veți fi direcționat către un ecran care va prezenta o instrucțiune în patru pași. Din aceasta vei învăța cum să folosești fonturile. Dacă doriți să descărcați fonturile selectate pentru a le utiliza într-un editor grafic, pentru a le evalua sau pentru a face o captură de ecran.png atractivă pentru tema dvs., atunci trebuie doar să faceți clic pe butonul Descărcare fonturi din partea de sus a paginii. Dacă doriți doar să utilizați fontul în tema dvs., atunci nu trebuie să îl descărcați pe computer.

În primul pas, puteți alege stilurile și greutatea fontului inclus. În al doilea pas, puteți selecta setul de caractere pe care doriți să îl includeți. De asemenea, puteți evalua modul în care colecția de fonturi va afecta viteza de încărcare a paginii.

Acum trecem la al treilea pas, care nu este la fel de ușor ca și anterior. În al treilea pas, obținem codul care trebuie adăugat pe site-urile noastre - trei opțiuni diferite. Selectând opțiunea Standard - totuși, ne vom abate oarecum de la îndrumările Google pentru a sprijini metodele stabilite pentru adăugarea de stiluri la temele WordPress. În codul pentru versiunea standard, copiem numai adresa URL care este specificată ca atribut href pentru eticheta de link.

Apoi deschideți fișierul functions.php al temei. Vom crea o funcție pentru a încărca CSS-ul pe care îl vom folosi în tema noastră:

Funcția ggl_load_styles() ( )

Vedeți prefixul ggl pe funcția mea? Aceasta este una dintre practicile WordPress de succes. Prefixați întotdeauna numele funcțiilor dvs. WordPress pentru a reduce riscul de conflicte cu alte funcții din tema, tema secundară sau pluginurile dvs.

Acum, în această funcție, trebuie să ne înregistrăm foaia de stil primită de la Google:

Funcția ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Folosim funcția wp_register_style. Primul argument este un descriptor, i.e. prescurtare pe care o putem folosi pentru a ne referi la această foaie de stil mai târziu în codul nostru. Al doilea argument este calea către fișier. Utilizăm adresa URL pe care am primit-o în al treilea pas al instrucțiunilor Google.

În continuare, includem foaia noastră de stil principală pentru tema noastră. Sper că nu ați pus o etichetă de link în secțiunea head a fișierului header.php? Dacă da, reveniți la fișier și ștergeți acest cod. Apoi includeți foaia de stil în fișierul functions.php:

Funcția ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) )

Folosim funcția wp_enqueue_style. Are aceleași argumente ca wp_register_style. În primul rând, legăm un descriptor la foaia noastră de stil. Apoi obținem calea către foaia noastră de stil. Din fericire, în WordPress, puteți obține calea folosind funcția get_stylesheet_uri(). Apoi specificăm dependențele. Fișierul nostru style.css depinde de foaia de stil Google Web Fonts.

În cele din urmă, folosim hook-ul wp_enqueue_scripts pentru a apela funcția noastră:

Funcția ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

Fișierul functions.php este gata. Acum trebuie să facem ultimul pas pentru a folosi fontul selectat. Al patrulea pas din instrucțiunile Google arată ce valori trebuie să transmitem proprietății font-family pentru a folosi fontul nostru. Vreau să-mi fac toate titlurile în font Holtwood One SC:

h1, h2, h3, h4, h5, h6 (familie de fonturi: „Holtwood One SC”, serif; )

Și vreau să fac descrierea site-ului în font Rouge Script:

Descrierea site-ului (familie de fonturi: „Rouge Script”, cursive; )

Tot! Nu mai trebuie făcut nimic! Ați adăugat Google Web Fonts la tema dvs. WordPress. Folosește-le în mod responsabil!

Vlad Merjevici

Fontul este parte integrantă a designului web, conferă site-ului expresivitate și recunoaștere, exprimă stilul caracteristic site-ului și este direct legat de percepția textelor. Este posibil ca un font bine ales să nu fie observat, dar fără el nu va exista poftă care să completeze designul site-ului.

Dacă aveți deja un anumit font instalat pe computer, adăugați doar o linie în stiluri.

h1 (familie de fonturi: SuperPuperFont; )

Valoarea proprietății font-family este numele familiei de fonturi, se va aplica tuturor titlurilor

. Dar ce vor vedea vizitatorii site-ului dacă nu au instalat fontul nostru spectaculos și rar? Această situație este cea mai probabilă, așa că dacă browserul nu recunoaște fontul declarat, va folosi fontul implicit, de exemplu, pe Windows este Times New Roman. Tot designul nostru de tip atent gândit se va prăbuși și va deveni praf peste noapte, așa că trebuie să căutăm cea mai universală soluție. Primul lucru care îmi vine imediat în minte este să organizați descărcarea fișierului cu fonturi pe computerul utilizatorului și să afișați textul în fontul selectat. În comparație cu alte metode, cum ar fi afișarea textului printr-o imagine, această metodă este cea mai simplă și mai versatilă.

Care sunt beneficiile de a descărca un fișier cu font și apoi de a-l aplica prin CSS.

• Textul este ușor de adăugat și editat.
• În browser, puteți utiliza căutarea și găsiți expresiile dorite.
• În setările browserului, puteți reduce sau mări dimensiunea fontului pentru a obține o vizualizare confortabilă.
• Motoarele de căutare indexează bine conținutul documentului.
• Textul poate fi selectat și copiat în clipboard, precum și tradus într-o altă limbă.
• Setările de text, cum ar fi spațierea liniilor, culoarea, dimensiunea și altele asemenea, sunt ușor de schimbat folosind proprietățile CSS.
• Din nou, folosind CSS, este ușor să adăugați diferite efecte textului, cum ar fi o umbră.

După cum puteți vedea, există o mulțime de avantaje. Există și dezavantaje minore și pentru echilibru merită menționate.

• Nu toate versiunile de browser acceptă font descărcabil și formatul one-for-all.
• Un fișier care conține un tip de literă poate ocupa o cantitate mare de spațiu, încetinind astfel încărcarea unei pagini web.

În tabel. 1 listează versiunile de browser și formatele de font pe care le acceptă.

Tab. 1. Formate acceptate

Format	Internet Explorer	Crom	Operă	safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Cel mai acceptat format este TTF. Cu excepția IE până la versiunea 9.0 și iOS, toate browserele îl înțeleg perfect. Deci, dacă aveți un font în acest format și vizați browsere moderne, nu va trebui să faceți niciun fel de pași suplimentari. Este suficient să scrieți următorul cod în stiluri (exemplul 1).

Exemplul 1: Conectarea TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

În primul rând, încărcăm fișierul cu font folosind regula @font-face. În interiorul acestuia, scriem numele familiei de fonturi prin parametrul font-family și calea către fișier prin src . Apoi, utilizați fontul ca de obicei. Deci, dacă trebuie să setăm fontul antetului, atunci pentru selectorul h1, așa cum se arată în exemplu, setăm proprietatea font-family cu numele fontului încărcat. Pentru versiunile mai vechi de IE, listăm alternativele separate prin virgule. În acest caz, fontul titlului va fi „Comic Sans MS”, deoarece IE8 și mai jos nu acceptă formatul TTF.

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Titlu cu font descărcat

Ce se întâmplă dacă ai nevoie disperată de un font ornamentat în IE8? Din fericire, @font-face vă permite să includeți mai multe fișiere de fonturi de diferite formate în același timp. Browserul trebuie doar să aleagă pe cel potrivit. Astfel, o soluție universală care funcționează în toate browserele se rezumă la conversia formatului TTF existent în EOT și apoi includerea ambelor fișiere.

Pentru conversie, există mai multe servicii online care vă permit să încărcați un fișier TTF și să obțineți un fișier EOT ca rezultat. Din păcate, majoritatea acestor servicii au aceeași problemă - primim fișierul, dar limba rusă nu este acceptată în el. Ca urmare, rezultatul dorit nu este atins, conversia este incorectă. Printre site-urile pe care le-am verificat, a fost unul care arăta corect textul în IE.

Mergem pe acest site, încărcăm fișierul TTF și facem clic pe butonul „Convert TTF to EOT”, după care salvăm fișierul rezultat în folderul fonturi. În stiluri, rămâne să faceți un mic truc și să obțineți diferite browsere pentru a descărca fontul în formatul potrivit. Pentru a face acest lucru, adăugați doi parametri src. Primul indică fișierul EOT și este pentru versiuni mai vechi de IE. Al doilea parametru src trebuie să conțină două adrese separate prin virgulă, dintre care una indică un fișier TTF. Cert este că versiunea IE 8.0 și mai mică nu înțelege virgula din parametrul src și, în consecință, va ignora întregul parametru. Pot exista mai multe opțiuni de ortografie, de exemplu, repetare url , specificați numele fontului în interiorul parametrului local sau chiar scrieți un font inexistent. Dacă browserul nu poate încărca un astfel de font, atunci va merge la al doilea din listă și îl avem scris corect. Ortografii acceptabile.

src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

O versiune de lucru a conectării fontului pentru toate versiunile de browsere este prezentată în exemplul 2.

Exemplul 2: Conectarea EOT

HTML5 CSS3 IE Cr Op Sa Fx

Element modern al procesului politic

De fapt, doctrina politică a lui Montesquieu conduce tipul european continental de cultură politică, care se reflectă în scrierile lui Michels.

În ceea ce privește iOS, mi se pare că nu prea are rost să facem și să descărcați un font separat în format SVG. Audiența site-urilor care îl vizionează prin iOS este încă mică, în plus, încearcă să ușureze versiunea site-ului pentru dispozitive mobile și nu este recomandabil să descărcați încă câteva zeci de kilobytes.

Fonturi web Google

Un serviciu convenabil care se ocupă de rutina de a accepta diferite formate de fonturi și versiuni de browser poate fi găsit la www.google.com/webfonts. Deși există relativ puține fonturi diferite în colecție (există câteva zeci), toate sunt selectate de foarte înaltă calitate și sunt gratuite de utilizat pe site-uri web.

Înainte de a alege un font, comutați valoarea Script la Chirilic, apoi veți vedea o listă de fonturi care acceptă limba rusă (Fig. 2).

Orez. 2. Alegerea fonturilor în Google Web Fonts

Fontul care vă place trebuie mai întâi adăugat la colecție făcând clic pe butonul „Adăugați la colecție”, apoi pe butonul „Utilizați” din colțul din dreapta jos al ecranului. Pe pagina următoare (fig. 3) puteți selecta în sfârșit fonturile de care aveți nevoie. În același timp, trebuie înțeles că un tip de literă poate conține mai multe stiluri, iar fiecare dintre ele crește volumul fișierelor descărcate.

Orez. 3. Fonturi încărcate pe pagină

Puteți conecta fonturile selectate într-unul din trei moduri, codul adăugat poate fi copiat în pagină.

1. Prin element . Linia va arăta ca următorul.

2. Prin regula @import. Introduceți această linie în fișierul dvs. CSS în partea de sus.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Prin JavaScript.

În principiu, toate căile sunt egale, așa că alegeți după preferință.

Avantajele utilizării acestui serviciu sunt următoarele.

• Fonturile sunt gratuite, nu trebuie să plătiți pentru ele.
• Fonturile propuse sunt „sharpened” pentru vizualizare pe ecran, fișierele sunt optimizate și ocupă o cantitate relativ mică.
• Browserul este detectat automat și i se emite un font în formatul necesar.

Unul dintre principalele avantaje ale serviciului este că fonturile sunt stocate în formate TTF, EOT, WOFF, SVG și sunt încărcate după verificarea browserului. Deci, formatul EOT va fi disponibil numai pentru versiunile mai vechi de IE.

Dacă utilizați sau nu fonturi Google Web, depinde de dvs. Dacă nu ați găsit un font potrivit acolo, puteți oricând conecta TTF-ul popular și comun. În plus, este acceptat de cele mai recente versiuni ale tuturor browserelor populare.

Salut! Despre asta, am scris în lecția 132, puteți citi. Și în acest articol, vă voi spune cum puteți conecta ușor și rapid un font la site-ul dvs. din Google Fonts. În serviciul Google Font, trebuie să alegeți un font pentru site-ul dvs. și apoi să îl conectați.

Nu este necesar să încărcați fișierul cu font pe găzduire. Este suficient să înregistrați codul HTML necesar în antetul site-ului și în numele noului font. Fonturile pot fi conectate nu numai la un site WordPress, ci și la orice alt site.

Cum să conectați Google Fonts la site

Mergem la serviciul Google Font la acest link și selectăm fontul de care avem nevoie.
Fonturile pot fi selectate prin filtru. Adică setăm parametrii și astfel serviciul găsește fonturi cu parametrii selectați.

Puteți seta alți parametri dacă doriți: grosime (grosimea fontului), înclinarea (oblică), lățimea (lățimea fontului).

De asemenea, trebuie să selectați chirilic dacă site-ul dvs. este în rusă: cirillic (chirilic) sau cirilic extins (chirilic extins).

Când opțiunile sunt selectate, serviciul va afișa toate fonturile care sunt cu acestea.

Aducem cursorul mouse-ului la fontul pe care dorim să-l instalăm pe site, după care apar setări/parametri suplimentari: Quick-use (utilizare rapidă), Pop out (vezi fontul într-o fereastră separată) și Add to Collection (adăugare). la colecție).

alege " Utilizare rapidă» și vedeți un widget sub forma unui vitezometru în partea dreaptă. Acesta arată cât de repede este încărcat fontul selectat. Cu cât este mai mic numărul de pe acest vitezometru, cu atât mai bine.

Chiar și mai jos, puteți alege una dintre cele trei opțiuni pentru instalarea fontului pe site: standart, @import sau javascript.

Fiecare opțiune are instrucțiuni în limba engleză despre cum să conectați corect fontul la site. Îți voi arăta prima opțiune standard pentru că este mai simplu.

Copiați linia evidențiată în roșu, apoi inserați-o în fișierul header.php între etichete ….

Apoi deschidem fișierul de stil style.css, găsim fontul care trebuie schimbat și scriem unul nou. Doar introduceți numele noului font. Punem fontul Google Fonts între ghilimele, de exemplu, font-family: „Aladin”,Arial,Helvetica,Sans-serif.

Dacă nu înțelegi absolut nimic, despre ce vorbesc aici, atunci urmărește videoclipul în care vorbesc în detaliu, cum să conectați fontul google la site-ul wordpress

______________________
Lecția 204. dar fără plugin

O sursă excelentă de fonturi pentru web designeri. ÎN WPBv4 a început să folosească o combinație populară de fonturi font Google: căști OswaldȘi Lora. Unii utilizatori au pus întrebări despre dacă fonturile Google pot fi utilizate în temele WordPress și cum să o facă. Acest articol va vorbi despre cum să adăugați fonturi web Google la temele WordPress. dreapta fără a afecta performanța site-ului dvs.

Găsirea fonturilor web Google care vă plac

Mai întâi trebuie să găsiți acele fonturi de la Google care vă plac. Căutați opțiuni printre fonturile sugerate în biblioteca numită Biblioteca de fonturi Google. După ce găsiți o opțiune potrivită, faceți clic pe butonul Utilizare rapidă:

Făcând clic pe acest buton, veți ajunge la o pagină nouă. Derulați până când vedeți un formular numit „ Adăugați acest cod pe site-ul dvs":

Copiați codul și inserați-l în notepad, îl vom folosi mai târziu. De obicei sunt folosite cel puțin 2 fonturi diferite. De exemplu, în practica noastră, au fost folosite fonturi Oswald + Lora. Deci procedura descrisă mai sus trebuie repetată pentru al doilea font.

Adăugarea fonturilor web Google la tema dvs. WordPress

Există trei moduri principale de a adăuga fonturi de la Google pe site-ul dvs. web. De exemplu, există o modalitate standard, o modalitate de a importa @import si adaugand cu javascript. De obicei, se folosește una dintre primele două metode.

Cel mai simplu mod este să deschideți fișierul cu tema stil.cssși inserați următorul cod în el, legat de fontul adăugat (rețineți că l-am copiat în blocnotes în primul pas):

@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);

Asta fac mulți oameni StudioPress, Geneză). Dar, cu toate acestea, aceasta nu este o metodă complet corectă de a adăuga fonturi deschise. Utilizarea metodei @import blochează descărcările paralele, determinând browserul web să descarce fișierul cu fonturi până la sfârșit înainte de a continua să descarce restul conținutului site-ului. Deci, deși acest lucru pare convenabil, nu este cel mai bun mod de a lucra cu un font dacă ești îngrijorat de viteza și performanța site-ului tău. Puteți citi mai multe despre aceste detalii Aici.

Cel mai bine ar fi să combinați solicitările pentru diferite fonturi Google în o cerere pentru a evita solicitările HTTP excesive. Iată cum să o faci. Adăugarea codului:

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Chiar dacă ești forțat să folosești @import, cel puțin combinați mai multe solicitări într-una singură.

Cum să adăugați fonturi web Google fără a compromite performanța site-ului

Cel mai bine ar fi să folosești metoda standard, care utilizează linkuri mai degrabă decât importuri de fișiere. Luați doar două adrese URL de la primul pas al acestui ghid. Combinați 2 fonturi diferite adăugând un simbol între ele | . Apoi puneți codul rezultat într-un bloc cap subiectul dvs. Pentru a face acest lucru, va trebui să editați fișierul header.php și adăugați codul din foaia de stil la acesta. Ar trebui să obțineți ceva de genul următor:

scopul principal este să adăugați o solicitare de font într-un stadiu incipient. Potrivit blogului proiectului Fonturi web Google dacă există o etichetă de script înainte de declararea fontului @font-face, atunci Internet Explorer nu va reda nimic pe pagină până când fișierul cu fonturi nu este încărcat.

După finalizarea acestui pas, puteți utiliza pur și simplu fragmentul de cod și fontul rezultat din fișier css subiectul dvs. Va arata cam asa:

H1 (familie de fonturi: „Oswald”, Helvetica, Arial, serif; )

Există destul de multe teme și cadre pentru copii. Nu se recomandă modificați fișierele temei părinte, mai ales dacă utilizați un cadru; deoarece modificările aduse temei vor fi șterse de fiecare dată când actualizați versiunea cadrului. Va trebui să lucrați la suplimente și filtre în tema părinte sau cadrul acesteia dacă doriți să adăugați corect fonturi Google la temele secundare.

De exemplu, dacă te uiți la pagină plan, echipa a creat tema WPBv4 ca o temă copil personalizată din cadru Geneză. Să vedem cum să adăugați fonturi Google Web la o temă secundară bazată pe Geneză.

Cum să adăugați fonturi Google Web la tema copil bazată pe Genesis

Deschideți tema copil și fișierul acesteia funcții.php și adăugați următorul cod la acest fișier:

Add_action("genesis_meta", "wpb_add_google_fonts", 5); funcția wpb_add_google_fonts() ( echo " "; }

Principalul lucru de făcut este să te uiți la codul din interiorul blocului geneza_meta. În mod implicit, există opțiuni precum META- descrieri, cuvinte cheie, foi de stil, favicon-uri etc. Specificarea priorității 5 , ne vom asigura că foaia de stil este încărcată înainte ca foaia de stil principală să fie încărcată.

Din păcate, nu putem acoperi toate cadrele părinte și cadrele existente. Dacă aveți întrebări despre anumite teme, vă rugăm să le adresați dezvoltatorilor și autorilor de teme în firele corespunzătoare ale forumurilor pentru dezvoltatori de teme.

Sfatul nostru final cu privire la Fonturi web Google pe site-ul dvs.: nu puneți întrebări și nu experimentați cu fonturi pe care nu intenționați să le utilizați. De exemplu, dacă doriți doar fonturi normale și aldine, nu utilizați și nu personalizați orice alt stil posibil pentru un anumit font. Sperăm că această postare vă va ajuta să configurați și să utilizați corect Google Web Fonts pe site-ul dvs. WordPress.

Fonturile Google este una dintre cele mai bune resurse pentru fonturi web gratuite, iar Google vă oferă mai multe modalități de a le importa pe site-ul dvs. web. Din păcate, niciuna dintre ele nu include popularul motor WordPress. Acest lucru înseamnă că fie trebuie să utilizați pluginuri, dintre care există o mulțime, fie să vă murdărești mâinile căutând codul.

Vestea bună este că puteți instala orice font din biblioteca Google pe aproape orice temă WordPress fără prea multe bătăi de cap. Cum anume - vă vom învăța astăzi.

Există două opțiuni - conectați pluginul sau jucați puțin cu fișierul functions.php.

Dar mai întâi, aș dori să enumerez avantajele și dezavantajele fonturilor Google, astfel încât să puteți decide în sfârșit dacă le utilizați în proiectele dvs. sau nu.

Fonturi Google Web bune și rele

Când vine vorba de fonturi web, Google este una dintre cele mai bune opțiuni din punct de vedere al performanței . Toate din cauza designului ușor și a sistemului de stocare în cache. Vizitatorii nu trebuie să aștepte încărcarea fonturilor Google dacă au vizitat recent un site care le-a folosit. Fonturile populare precum Open Sans pot îmbunătăți performanța site-ului dvs. prin reducerea timpilor de încărcare.

O altă caracteristică este că Google vă permite să descărcați aceste fonturi , astfel încât să le puteți utiliza în machetele dvs.

Și, în sfârșit platforma este complet gratuită . Tot ce trebuie să faceți pentru a începe să utilizați fonturile este să vă conectați sau să aveți un cont Gmail (și cine nu are Gmail astăzi?).

De lipsuri poti specifica asta alegerea fonturilor Google este mică multe dintre ele sunt asemănătoare între ele. Trebuie să petreci mult timp căutând pentru a găsi un font decent, original. Există foarte puține fonturi pentru chirilic.

În plus, există comune preocupările legate de securitate - trebuie să furnizați câteva date personale atunci când instalați fonturi de la Google pe site-ul dvs.

Cum se instalează fonturi Google folosind pluginuri WordPress

Dacă căutați pluginuri, primul lucru pe care îl veți vedea în rezultatele căutării este Pluginurile WP Google Fonts și Easy Google Web Fonts . Acestea sunt cu adevărat două dintre cele mai bune plugin-uri.

Plugin-urile nu sunt soluția ideală pentru instalarea fonturilor Google pe un site WordPress – nu doar din punct de vedere al performanței, ci și pentru că pluginurile nu vă permit să selectați anumite bucăți de text. Cu toate acestea, dacă dumneavoastră sau clientul dumneavoastră sunteți convins că este mai bine să utilizați pluginuri, atunci uitați-vă la aceste două opțiuni.

Acest plugin vă permite să vizați elemente specifice, cum ar fi titluri H1, paragrafe și citate. De asemenea, obțineți o opțiune CSS personalizată pentru stilarea suplimentară a fonturilor individuale. Adăugarea și personalizarea fonturilor Google pe site-ul dvs. WordPress este destul de ușoară cu acest plugin.

Easy Google Web Fonts este la înălțimea numelui său și face instalarea Google Fonts foarte ușoară, chiar și pentru începători. Puteți utiliza funcția de previzualizare live pentru a vizualiza, testa și optimiza fonturile fără a părăsi site-ul web și puteți crea propriile reguli de font fără a scrie o singură linie de cod.

Modul corect de a instala Google Fonts într-un șablon WordPress

În final, ajungem la opțiunea de a deschide fișierul functions.php și de a juca puțin cu codul. Înainte de a putea face acest lucru, trebuie să selectați un font din biblioteca Google. De dragul unui exemplu, să încercăm să luăm un foarte popular Deschide Sans.

Apoi trebuie să alegeți un stil de font - normal, aldine sau italic. O poti face singur :)

După ce selectați stiluri, Google vă va oferi un fragment de cod. Al nostru arata asa:

În plus, avem stilul CSS:

font-family: „Open Sans”, sans-serif;

Acum este timpul să deschideți fișierul functions.php (calea fișierului: wp-content/themes/yourtheme). La sfârșitul fișierului, adăugați o nouă funcție:

funcția load_fonts()
{
wp_register_style("et-googlefonts",
„http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300”); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

Cheia acestei caracteristici este comanda „wp_enqueue_style”, care face ca WordPress să apeleze foile de stil pentru fonturi din antetul fiecărei pagini. Dacă vă uitați cu atenție, veți vedea că am eliminat link-ul href= și rel='stylesheet' type'text/css' din codul pe care ni l-a dat Google și va trebui să faceți același lucru dacă doriți să adăugați orice alt font Google pentru site-ul dvs. WordPress.

Tot ce trebuie să faceți acum este să deschideți fișierul CSS principal și să lipiți în stilul Open Sans. Aici se aplică regulile obișnuite, așa că adăugați următorul cod în foaia de stil, salvați și actualizați:

corp
{
font: normal 1em "Open Sans", sans-serif;
culoare: #313131;
}

Acest stil va funcționa pe tot site-ul. Puteți seta un stil diferit pentru fragmente individuale de text:

Text îngroșat
{
font: bold 1em "Open Sans", sans-serif;
}

După cum puteți vedea, este de fapt foarte simplu. Incearca sa verifici rezultatul :)