Fonturi web non-standard în aspect. Fonturi Google și fonturi web. Cum se conectează un font de la Google Fonts? Adăugarea fonturilor web Google la o temă WordPress

Salutare tuturor! Puteți citi despre ceea ce am scris în lecția 132. Și în acest articol, vă voi spune cum puteți conecta ușor și rapid un font la site-ul dvs. din Google Fonts. Folosind serviciul Google Font, trebuie să selectați un font pentru site-ul dvs. și apoi să îl conectați.

Nu este necesar să încărcați fișierul cu font în găzduire. Este suficient să te înregistrezi HTML necesar cod î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 un site web

Să mergem la serviciu Google Font din acest link și selectați fontul de care avem nevoie.
Fonturile pot fi selectate printr-un filtru. Adică setăm parametrii și astfel serviciul găsește fonturi cu parametrii selectați.

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


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

Când parametrii sunt selectați, serviciul va afișa toate fonturile care sunt disponibile cu aceștia.

Mutam cursorul mouse-ului pe fontul pe care dorim sa il instalam pe site, dupa care apar setari/parametri suplimentari: Utilizare rapida ( utilizare rapidă), Pop out (vedeți fontul într-o fereastră separată) și Adăugați la colecție (adăugați la colecție).

Selectați " Utilizare rapidă„și vedem din partea dreaptă widget pentru vitezometru. Acesta arată cât de repede se încarcă 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: standard, @import sau javascript.

Există instrucțiuni pentru fiecare opțiune. engleză, 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ă cu roșu, apoi inserați-o în fișierul header.php între etichete ….

Apoi deschideți fișierul style.css, găsiți fontul care trebuie schimbat și adăugați unul nou. Pur și simplu scriem 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 ceea ce am spus aici, atunci urmărește videoclipul în care vorbesc în detaliu, cum să conectați Google Font la site-ul WordPress


______________________
Pentru lecția 204. fără plugin

Salutări, dragi cititori. Astăzi vom vorbi despre google fonts (google web fonts), cum să le descărcați și să le conectați la site.

Să mergem pe site www.google.com/fonts/, în filtrul din dreapta selectăm: 1. categoria dorită, 2. dacă este necesar, le sortăm și 3. selectam limba de care avem nevoie (dacă aveți nevoie de un font rusesc în meniul din stânga, selectați Cyrillik).

Deci am ales fontul, acum trebuie să îi selectăm stilul, pentru a face acest lucru, extindeți panoul din partea de jos ( Deschideți sertarul de selecție) și accesați fila PERSONALIZĂși selectați stilurile și limbile de care aveți nevoie.

Pentru a descărca faceți clic pe butonul descărcare.

Conectarea fontului descărcat

Copiați fonturile conținute în arhivă în folderul /fonts, care ar trebui să fie în același director cu folderul /css al site-ului dvs. HTML.

Conexiune standard fonturi descărcate arata asa

@font-face (familie de fonturi: „Font_name_any”; src: url(„Font_file_name.eot”); src: url(„Font_file_name.eot? #iefix”) format(„embedded-opentype”), url(”Font_file_name .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); font-weight: normal; font -stil: normal)

În cazul meu, conexiunea va arăta așa

/* Cod pentru a include fontul în /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font - stil: normal;

Pentru a conecta fontul pe care l-ați ales la site, accesați fila EMBED, acolo vei vedea 2 metode de conectare:

1.STANDARD

Acest cod trebuie adăugat la secțiune documentul dvs. HTML.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Important. Indiferent de metoda de conectare, utilizați următoarele reguli CSS pentru a defini aceste familii: font-family: ‘Roboto’, sans-serif; mai multe despre asta mai jos.

Google Fonts este unul dintre cele mai bune resurse cu fonturi web gratuite, iar Google vă oferă mai multe moduri 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 Tema 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 Google Fonturi, astfel încât să puteți decide în sfârșit dacă le utilizați în proiectele dvs. sau nu.

Elementele bune și rele ale fonturilor web Google

Când vine vorba de fonturi web, Google este unul 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 ar trebui 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ă . Pentru a începe să utilizați fonturi, trebuie doar să vă conectați sau să creați cutie poştală la Gmail (cine nu are Gmail în zilele noastre?).

Printre lipsuri se poate indica faptul că Selecția de fonturi 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.

Pe lângă aceasta, există și cele obișnuite probleme de securitate – trebuie să furnizați câteva informații personale atunci când instalați fonturi 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.

Pluginurile nu sunt solutie ideala Pentru Instalări Google-fonturi pe un site WordPress - nu numai 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ă dvs. sau clientul dvs. sunteți convins că pluginurile sunt mai bune, 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. Obțineți și o opțiune CSS personalizată pentru munca in continuare cu stiluri individuale de font. 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 Previzualizare live pentru a vizualiza, testa și optimiza fonturile fără a părăsi site-ul web și pentru a crea propriile reguli de font fără a scrie o linie de cod.

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

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

Apoi, trebuie să alegeți un stil de font - normal, aldin sau cursiv. Poți face asta singur :)

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

În plus, avem stilul CSS:

familia de fonturi: „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 funcții este comanda „wp_enqueue_style”, care obligă WordPress să apeleze foile de stil de font în 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 cu 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. LA fragmente separate text, puteți seta un stil diferit:

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

După cum puteți vedea, totul este de fapt foarte simplu. Încearcă și verifică rezultatul :)

A învăța despre totul pe cont propriu nu este ușor, dar foarte interesant. Dacă aveți o înțelegere cel puțin superficială a modului în care funcționează site-ul, atunci pentru a vă implementa proiectul este mai bine să îl faceți singur. În același timp, nu numai că vei economisi mulți bani, dar vei învăța și o mulțime de „trucuri”, secrete etc. Utilizarea fonturilor Google de obicei nu atrage atenția, deși datorită lor blogul poate deveni mult mai mult interesant.

Serviciu

Cu destul de mult timp în urmă, pe Internet a apărut un serviciu mare de fonturi web. A fost dezvoltat de Google. Utilizatorii l-ar putea folosi gratuit. În ciuda faptului că acest tip de configurare nu este considerat super complicat, au existat totuși oameni care au făcut greșeli și nu au putut face față serviciului.

Un design simplu a fost special dezvoltat în acest scop. Acum lucrul cu Google Fonts a devenit mai ușor, iar numărul de vizitatori a crescut. Biblioteca s-a extins și ea. Anul trecut, serviciul a fost reproiectat, ceea ce a reunit multe feedback pozitiv. Acum este mai ușor pentru oameni să conecteze fonturile la site-urile lor web și să le vadă.

Aspect

Deci, pentru cei care nu au fost niciodată pe un site cu designul vechi, trebuie să obțineți o imagine de ansamblu a modificărilor. În trecut, serviciul arăta destul de masiv. Peste tot erau cadre groase, butoane albastre strălucitoare, iar grafica nu avea cea mai mare rezoluție. Toate acestea l-au influențat semnificativ pe vizitator.

Acum dezvoltatorii s-au concentrat pe Material Design. Totul a dobândit caracteristici rafinate. Aspect a devenit „mai ușor”. Animația subtilă și interactivitatea au devenit vizibile. Nu există nimic altceva care să vă distragă atenția de la alegerea fontului Google Fonts potrivit.

Există o adaptare convenabilă a resursei pentru dispozitive mobile. Desigur, o astfel de schimbare nu este foarte vizibilă pe fondul inovațiilor, dar ținând cont de bug-uri versiunea anterioară va deveni „mana din cer” pentru utilizatorii pasionați.

Oportunitate

Designerii folosesc adesea acest serviciu. În ciuda experienței și profesionalismului lor, lucrează și cu vizualizare. Reproiectarea a oferit mai multe oportunități similare care v-ar permite să combinați în avans ceea ce ar trebui să implementați mai târziu în proiect.

Prin urmare, problema cu modul în care un font se potrivește cu altă culoare și cu un al treilea fundal a dispărut. Compania a adăugat pe site mai multe instrumenteși o paletă cu tonuri universale care vă va permite să experimentați și să aflați cum va arăta un anumit font într-o anumită culoare.

Favorite

Serviciul de fonturi Google Fonts permite utilizatorilor să folosească opțiunile lor preferate. O filă specială conține un set de stiluri pe care dezvoltatorul le recomandă pentru utilizare. Aceste colecții ies în evidență de restul. Sunt dezvoltate de specialiști de la Google și agenții terțe. Majoritatea au un anumit stil și o filozofie aparte.

Vedere

Una dintre schimbările importante a vizat alegerea fonturilor. Aceasta înseamnă că anterior utilizatorul a văzut în fața lui o anumită poză cu butoane suplimentare și una mare albastră, care a adăugat fontul colecției. În general, această opțiune arăta bine, dar caseta nu a avut întotdeauna o rezoluție suficient de bună a imaginii cu stilul și, prin urmare, a fost dificil să se determine fără ambiguitate cum ar arăta fontul.

Au fost și întrebări despre asta butoane suplimentare, despre care se știa puțin la prima vedere. Trebuia fie să le arăți, fie să le folosești. Acum totul a devenit mai mult sau mai puțin clar. Au apărut caracteristici suplimentare:

  • Selectați o anumită propoziție, paragraf sau element de text personalizat.
  • Experimentarea cu greutatea fontului.
  • Reglați rapid dimensiunile folosind glisorul.

Apropo, schimbarea dimensiunilor fonturilor Google a devenit mai adaptabilă, deoarece a fost schimbat un singur exemplu și nu totul pe pagină. ÎN versiunea veche utilizatorii ar putea fi transferați dintr-o parte a paginii în cealaltă, dar în cea nouă pur și simplu rămâneți pe exemplul pe care îl ajustați.

Conexiune

Dacă sunteți gata să utilizați acest serviciu, puteți încerca să conectați fonturile la resursa dvs. Procesul de obținere a unei legături este universal. Pot apărea probleme în funcție de sistemul dvs. CMS. Fiecare folosește propriile metode. Prin urmare, va trebui să selectați opțiuni separate pentru diferite proiecte.

Vom vedea cum să obținem un link pentru a conecta fonturile Google. Trebuie să accesați site-ul oficial Google Fonts. Acolo răsfoiți un catalog de stiluri și îl alegeți pe cel care vi se potrivește cel mai bine. Pentru a face acest lucru, faceți clic pe semnul plus de lângă acesta. După aceea, fontul va fi adăugat într-un bloc special din partea de jos a paginii.

Faceți clic pe acest bloc și apoi configurați-l. Aici puteți alege stilul și alfabetul dorit. Dacă aveți nevoie de fonturi chirilice Google, atunci verificați linia chirilice. Ulterior va fi generat un link. Poate fi găsit în aceeași fereastră din fila Încorporare. Trebuie doar să îl copiați sau să îl utilizați cod complet HTML.

De obicei, în setările site-ului există o setare pentru fonturi și culori. Există opțiuni standard și puteți adăuga unele avansate. Acestea conțin o opțiune separată pentru fonturile Google. Dacă trebuie să descărcați fonturi prin pluginul Supreme Google Webfonts.

Opțiuni populare

Este dificil, desigur, să judeci care stiluri sunt mai bune, mai ales pentru diferite subiecte ale site-ului. Când vă creați site-ul web, rețineți că acesta ar trebui să vă atragă nu pe dvs., ci pe publicul dvs. Prin urmare, este mai bine să aruncați o privire mai atentă la site-urile concurente.

De obicei, pentru resursele comerciale, nimeni nu se deranjează în privința stilurilor. La urma urmei, dacă vezi un font în Google Chromeîntr-un magazin online, este puțin probabil să vă concentrați asupra acestuia. Dar dacă ai un blog în fața ta, atunci cel mai probabil s-ar putea să-ți placă unele lucruri, dar altele, dimpotrivă, te vor irita.

Google Fonts a pregătit multe colecții care includ stiluri populare. De exemplu, le place să folosească Homar pentru blocuri individuale de text. Este greu de citit când întregul articol este scris cu caractere cursive atât de îndrăznețe. Dar inserțiile și citatele arată bine.

Bad Script este, de asemenea, o opțiune pentru bloguri. Tipul cursiv este greu de citit suprafețe mari text, dar pot evidenția ideea principală. Stilul imită scrisul de mână. Jura normal 400 este o opțiune interesantă pentru alfabetul chirilic. Autorul susține că acesta este un Eurostyle din familia Sans Serif. Chiar arată foarte bine și are mai multe variante.

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 Laura. Unii utilizatori au pus întrebări despre dacă fonturile Google pot fi utilizate în temele WordPress și cum să facă acest lucru. Acest articol va vorbi despre cum să adăugați fonturi web Google la temele WordPress Corect 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 fonturile de la Google care vă plac. Căutați opțiuni printre fonturile oferite în biblioteca numită Biblioteca de fonturi Google. După ce găsiți o opțiune potrivită, faceți clic pe butonul Utilizare rapidă:

După ce faceți clic pe acest buton, vă veți găsi pe noua pagina. 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ă am folosit fonturi Oswald + Laura. Deci procedura descrisă mai sus trebuie repetată pentru al doilea font.

Adăugarea fonturilor web Google la o temă WordPress

Există trei moduri principale de a adăuga fonturi Google pe site-ul dvs. web. De exemplu, există o cale standard, metoda de import @importși adăugarea folosind 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 în el următorul cod legat de fontul pe care îl adăugați (rețineți că l-am copiat în Notepad în primul pas):

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

Mulți oameni fac asta ( StudioPress, Geneză). Dar, cu toate acestea, aceasta nu este o metodă complet corectă de a adăuga fonturi deschise. Folosind metoda @import blochează descărcările paralele, determinând browserul web să finalizeze mai întâi descărcarea fișierului cu fonturi înainte de a continua să descarce restul conținutului site-ului. Prin urmare, deși această metodă pare convenabilă, nu este cel mai bun mod pentru a lucra cu fonturi dacă vă pasă de viteza și performanța site-ului dvs. Puteți citi mai multe despre aceste nuanțe Aici.

Cel mai bun lucru de făcut ar fi să combinați solicitările la diferite fonturi Google în o singură cerere pentru a evita solicitările HTTP excesive. Iată cum să o faci. Adăugați codul:

@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 interogări într-una singură.

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

Cel mai bun mod ar fi să folosești metoda standard , care folosește linkuri în loc să importe un fișier. Luați doar două adrese URL de la primul pas al acestei instrucțiuni. 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ă arate cam așa:

Scopul principal- aceasta este pentru a adăuga o solicitare la font într-un stadiu incipient. Conform blogului proiectului Fonturi web Google dacă există o etichetă de script înainte de declararea fontului @font-face, Atunci Internet Explorer nimic nu va fi redat pe pagină până când fișierul font în sine este încărcat.

După execuție acest pas puteți utiliza pur și simplu fragmentul de cod rezultat și fontul 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. Nerecomandat 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ă Planul, 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 o temă Genesis Child

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- asta pentru a te uita la codul din interiorul blocului geneza_meta. În mod implicit, există parametri precum META-descrieri, cuvinte cheie, foi de stil, favicon-uri etc. Prin 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 temei în firele de discuții adecvate ale forumului pentru dezvoltatori de teme.

Ultimul nostru sfat 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ă aveți nevoie doar de fonturi normale și aldine, nu utilizați și nu personalizați toate celelalte stiluri posibile 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.