Fonturi web non-standard în aspect. Fonturi Google și fonturi web. Conectarea fonturilor CSS. Lucrul cu fonturi web. Fonturi Google Conectarea fonturilor de la fonturi google css

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 rame groase, butoane albastre strălucitoare, grafica nu era cea mai bună rezoluție înaltă. 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.

Sponsor al materialului.
Aer condiționat în magazinul online http://www.technodom.kz/catalog/konditsionery. aparate de aer conditionat - cele mai bune produse, împrumut, selecție mare, servicii impecabile.

Bună seara dragi cititori. Probabil toți visați să faceți site-urile dvs. web sau ale clientului dvs. mai concise și mai atractive.

Unul dintre principalii factori care este responsabil pentru percepția informațiilor de pe un site web sunt fonturile și modul în care le folosim împreună. Deoarece pe un site, două sau mai multe tipuri de fonturi sunt cele mai des folosite, de exemplu, pentru titluri și doar pentru textul principal.

Una dintre posibilitățile de a îmbunătăți vizual lizibilitatea textelor este conectarea fonturilor de la terți. La urma urmei, probabil toată lumea știe cât de „sărac” colecție standard Fonturi chiriliceîn Windows, care este responsabil pentru afișarea textului în browser.

Fonturi standard:

Cufon și @font-face

Anterior, am scris deja despre, cu care puteți conecta fonturi non-standard la site. Acum să ne uităm la o metodă mai simplă - regula @font-face în css și încărcarea fontului în sine din stocarea fonturilor Google Fonts.

Întreaga diferență dintre Cufon și @font-face este că primul folosește js pentru a emula fontul și desenează caractere folosind propriile mijloace, în timp ce @font-face încarcă fontul în sine pe computerul vizitatorului, iar browserul îl folosește deja pentru a afișa text. .

În orice caz, Cufon și @font-face reduc viteza de încărcare a site-ului, deși nu semnificativ.

Utilizarea fonturilor Google pe un site web

Nu voi scrie prea mult și pentru o lungă perioadă de timp, voi da un exemplu concret de conectare a fonturilor Google, folosind acest blog ca exemplu.

După cum puteți vedea, titlurile și subtitlurile articolelor mele nu sunt font standard, acum, în practică, vă voi arăta cum să faceți acest lucru și veți încerca același lucru pe site-urile dvs.

Selectarea unui font în depozit

Ca să nu te sperii, îți voi explica - un depozit este un depozit, dar într-un mod burghez :). Și așa, să mergem la http://www.google.com/fonts/și căutați un font potrivit pentru dvs.:

Nu prea mult în meniu:
În stânga, după cum puteți vedea, există un bloc cu tot felul de filtre de căutare de fonturi, în care puteți selecta, de exemplu, doar fonturi latine sau chirilice. Și în partea de sus, setări pentru afișarea exemplelor, care sunt împărțite în 4 file:

• Cuvânt— afișarea mai multor litere. În acest mod, este convenabil să comparați mai multe fonturi simultan și să vedeți cum arată anumite caractere;
• Propoziție— afișare sub forma unei propoziții;
• Paragraf— este afișată o bucată mare de text, ceea ce vă va permite să comparați vizual fontul din textul în sine;
• Poster— sunt afișate titlurile; această metodă de comparare este convenabilă pentru selectarea fontului de utilizat în titluri.

Conectarea fontului la site

După aceea, în panoul Colecție, care se află în partea de jos, accesați fila Utilizare, care este responsabilă pentru utilizarea fonturilor din colecția dvs. Aici veți vedea imediat că Google arată cât de mult se va deteriora viteza de încărcare a paginii:

Mai jos este un panou cu opțiunea de „tip de afișare”, selectați latină (latină) și chirilic (chirilic), ceea ce ne va oferi posibilitatea de a afișa atât litere latine, cât și litere chirilice:

După aceasta, trecem la al treilea punct de pe această pagină, și anume conexiunea în sine. Google ne oferă trei opțiuni pentru încorporarea fonturilor sale - prin js, mod standard prin conexiune la și @import în fișierul css. Folosesc ultima metodă.

Deschideți fișierul CSS și scrieți linia pe care ne-a oferit-o Google:

Gata, am conectat fontul de la Google Fonts la site, acum cum să îl folosim?

Utilizare în CSS

Totul este destul de simplu, după ce am conectat fontul prin @import , trebuie să ne înregistrăm instrucțiuni standard pentru acele clase și identificatori pentru care noastre font nou. De exemplu:

h1, h2, h3 (familie de fonturi: „Cuprum”, sans-serif;)

După toate aceste manipulări, veți vedea titluri cu un font nou, non-standard.

Atât, vă mulțumesc pentru atenție și ne vedem curând.

Fontul joacă un rol important în designul site-ului, poate sublinia stilul general și poate ajuta utilizatorul să navigheze în conținutul textului. Căutați fonturi gratuite și apoi conectați o grămadă de fișiere pentru browsere diferite– nu este o sarcină plină de satisfacții, dar există o cale de ieșire – fonturi din Google Fonts.

Găsirea fontului potrivit din Google Fonts

Să mergem la serviciul de fonturi Google însuși și să ne uităm la capacitățile acestuia.

În panoul din stânga (lateral), puteți configura parametrii de filtrare a fonturilor și, cel mai important, puteți selecta dacă aparține alfabetului chirilic sau latin.
În partea de sus, puteți modifica afișarea textului demonstrativ sub formă de: cuvinte, propoziții, paragrafe, postere. Schimbați dimensiunea fontului și introduceți textul în loc de opțiunea demo.

Conectarea unui font de la Google Fonts

După ce ați selectat fontul dorit, faceți clic pe butonul „utilizare rapidă” (vezi imaginea de mai jos)

Pe pagina de conectare a fonturilor, trebuie să selectați:

1. Stiluri de font, îndrăzneală, cursive etc. Nu grăbiți prea mult, alegeți doar cel mai necesar, pentru că... toate acestea afectează viteza de încărcare a fontului și, în consecință, viteza de încărcare a textului pe site-ul dvs. Monitorizați citirile senzorului din dreapta (punctul 5 din imagine)
2. Selectați ce caractere aveți nevoie în acest font (în principal latină și chirilică).
3. Copiați codul etichetei de legătură în blocul HEAD
4. Folosiți declarația fontului în stiluri așa cum se arată la punctul 4 (vezi imaginea)

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.

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