Cum să ghidați pentru utilizarea fonturilor Google cu Google și pluginuri!

Dacă sunteți designer, este mai probabil să considerați tipografia drept fundația oricărui design de site web. Nu doar selectarea fonturilor, ci și oferirea unui avantaj pentru lizibilitatea paginilor web.

Ce este tipografia?
Tipografia se referă la selectarea lungimii liniei, a mărimii punctelor, a spațierii între linii, a fonturilor și în ajustarea spațiilor dintre grupurile de litere.

De ce este Google Fonts o alegere clară?
Au fost momente în care internetul avea fonturi standard care ar plictisi pe oricine se uită la ele, dar, odată cu trecerea timpului, designerii și dezvoltatorii web au fost forțați să-și limiteze opțiunile de fonturi de text live și să proiecteze fonturile care sunt compatibile cu cel mai mare număr de utilizatori de peste. internetul. Au venit cu CSS3. Typekit a inițiat-o.

Typekit a dezvoltat unele dintre fonturile atrăgătoare care i-au ajutat pe designeri să aleagă fonturi atrăgătoare și ușor de utilizat pentru paginile lor web, dar singura problemă în utilizarea Typekit a fost costul pe care îl percep utilizatorilor.

Prețul era de 49 USD și în cazul în care un designer ar dori să dezvolte două site-uri, trebuia să plătească 99 USD doar pentru utilizarea fonturilor pe pagina web. Mulțumim lui Google care a venit împreună cu modelele sale geniale de fonturi și l-a oferit gratuit.

Este destul de evident că nu primești gratis ceea ce poți obține cu bani, dar crede-le, Google Web Fonts au fost totuși decât cele oferite de Typekit. Desigur, fonturile Google Web sunt cele mai bune atunci când nu vă place să cheltuiți prea mult pe fonturi, deoarece știți că construirea întregului site web costă prea mult.

Fonturile Google și personalizarea lor:
Începând de astăzi, în biblioteca Google există peste 647 de fonturi de familii separate de fonturi. Când selectați un font pentru conținutul site-ului dvs. web, este imperativ să îl vizualizați într-un mod similar cu modul în care veți implementa acel font. Unele fonturi arată perfect pentru conținutul corpului, dar îngrozitor ca titlu.

Din fericire, Google Web Fonts vă permite să vă personalizați previzualizarea pentru a se potrivi cu cazul dvs. de utilizare. Puteți introduce text de previzualizare personalizat și puteți modifica dimensiunea de previzualizare după cum doriți. Este important să previzualizați orice antet sau copie de corp pe care o veți utiliza în vizualizarea paragraf și, dacă aveți multă copie de corp, nu folosiți prea multe fonturi personalizate.

Canalizarea fontului potrivit!
Deoarece suntem conștienți de peste șase sute de familii de fonturi pe care trebuie să le cercetăm, devine dificil să filtrați și să alegeți cea potrivită, pur și simplu derulând printre ele unul câte unul. Așadar, utilizați pașii de mai jos pentru a vă concentra exact ceea ce aveți nevoie pentru site-ul dvs.:

• Aruncă o privire rapidă la fonturile care au fost actualizate recent de Google. Sunt șanse să obțineți fontul în tendințe și fără erori fără a fi nevoie să căutați restul fonturilor. De asemenea, vedeți fonturile folosite de majoritatea designerilor și dezvoltatorilor. Acest lucru vă va permite să cunoașteți fonturile versatile pe care le puteți utiliza în mai multe stiluri și lățimi.
• Dacă cunoașteți tipul pentru site-ul dvs., caracteristicile și stilul fonturilor vă pot îmbunătăți rezultatele, cum ar fi dacă doriți un font scris de mână, dezactivați toate celelalte tipuri de rezultate.
• Google vă permite să vă rafinați și mai mult căutarea fonturilor adăugând grosimea, înclinarea și lățimea caracterului ca opțiuni de filtrare. Nu este o funcție grozavă să obțineți cel mai bun font pentru site-ul dvs.?

Selectarea fonturilor
Google are diverse metode de a alege și apoi de a implementa fonturile în funcție de nevoile proprietarului unui site web. Nu este nimic corect sau greșit aici. Orice este mai bine pentru tine, vei primi asta. Acceptă trei butoane pentru a vă ajuta să alegeți fontul potrivit:

• Utilizare rapidă: pentru a arunca o privire rapidă asupra fontului care vă place.
• Pop out: pentru a afla mai multe despre fontul care vă place, adică funcționalitatea și utilizările acestuia.
• Colecție: Dacă doriți să utilizați mai mult de două fonturi, Colecția este butonul pe care trebuie să faceți clic. Va adăuga toate fonturile care vă plac pe o singură pagină.

Cum să utilizați fonturile Google?
După ce ați selectat fonturile pe care doriți să le utilizați pe pagina dvs. web, puteți face clic pe fila „Utilizați” pentru a le vedea în acțiune. Acum, când sunteți sigur de font, tot ce aveți nevoie este să copiați și să lipiți un cod pe pagina dvs. web. Veți avea trei opțiuni din care să alegeți:

Standard:
Este un link standard pentru foaia de stil. Trebuie să îl plasați în partea de cap a fișierului HTML, economisind astfel pasul de a adăuga regula @import, deoarece adăugați semnificativ într-o foaie de stil care o are deja introdusă. Exemplu:

CSS:
Utilizați regula CSS @import în cazul în care nu doriți să vă conectați la foaia de stil generată automat din antet. Utilizați codul de mai jos pentru a integra fonturile în CSS:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google și Typekit, ambele au dezvoltat acest cod aici ca parte a încărcării WebFont pentru a oferi utilizatorilor mai mult control asupra încărcării fonturilor.

Luați un fragment HTML și puneți-l lângă antetul HTML ca:

Titlul paginii

Mergeți la CSS și urmați asta:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Cu ajutorul pluginurilor!
Există câteva plugin-uri disponibile care oferă o integrare perfectă a fonturilor Google. Utilizarea pluginurilor are limitările sale, cum ar fi un plugin care nu știe să caute un anumit text fără a mai personaliza cu ajutorul HTML sau CSS. Dar totuși, iată câteva plugin-uri pentru a include fonturi Google pe site-ul dvs. web.

1. Plugin pentru fonturi

Este o modalitate ușoară și eficientă de a introduce fonturi Google pe site-ul dvs. cu doar câteva clicuri. Puteți fie să utilizați foaia de stil, fie să utilizați stilul CSS; ambele vor lucra pentru a le adapta la tema dvs. O poți face din zona de administrare sau din foaia de stil a site-ului tău web. Pluginul Fonturi este tot ce aveți nevoie pentru site-ul dvs., rapid și eficient.

2. Fonturi Google ușoare

Cu pluginul Easy Google Fonts, nu trebuie să atingeți nicio codificare pentru a obține fonturile pe site-ul dvs. De la alegere până la optimizare și oferirea de culori unice pentru live până la previzualizare, totul cu fonturi se poate face folosind Easy Google Fonts.

3. Fonturi Google TK

TK Google Fonts va adăuga toate cele 291 de fonturi Google Web în panoul editorului vizual atunci când dezvoltați pagini sau postări. Doar instalați-l și începeți să îl utilizați.

Instalarea pluginurilor de mai sus:

• Conectați-vă la administratorul WordPress
• Faceți clic pe „Plugin-uri”
• Faceți clic pe „Adăugați nou”
• Introduceți numele pluginului în colțul din dreapta sus și faceți clic pe „instalați acum”

Pentru a personaliza pluginurile

• Faceți clic pe „Aspect” și apoi pe „Personalizare”.
• Faceți clic pe „Vizitați site-ul” și apoi pe „Personalizați”
• Veți observa un nou meniu adăugat ca „Tipografie”

Implementați Învățarea!
Sperăm că citirea articolului a fost o lecție de învățare de folosit, iar acum este timpul să folosiți aceste cunoștințe pe site-ul dvs. Răsfoiți prin diverse fonturi, pluginuri pentru a îmbunătăți tipografia de pe site-urile dvs. web. Rețineți că, dacă personalizați un font, va fi mai benefic decât simpla copiere a lipirii unui font. Spuneți-ne fonturile și metodele pe care le utilizați pentru a adăuga tipografie pentru a atrage publicul în proiectele dvs.

Fonturile îmbunătățesc forma estetică a unui site web și sunt fundamentul oricărui design de site web. Fonturile sau tipografia se referă la selectarea lungimii liniei, a mărimii punctelor, a distanței între rânduri, a fonturilor și în ajustarea spațiilor dintre literele grupului.

În calitate de designer, este întotdeauna bine să vă rafinați căutarea fonturilor adăugând grosimea, înclinarea și lățimea caracterului ca opțiuni de filtrare. Nu toate fonturile arată bine în conținutul corpului și/sau al titlului.

Unele fonturi nu arată bine ca titlu, iar altele nu pot fi citite cu ușurință pe conținutul corpului. Prin urmare, este recomandabil să vizualizați fontul selectat într-un mod similar cu modul în care îl veți implementa, astfel încât să puteți testa lizibilitatea acestuia.

Au trecut vremurile în care internetul avea aceleași fonturi standard plictisitoare. Tehnologia avansată și designerii și dezvoltatorii web au fost forțați să creeze fonturi care sunt compatibile cu cel mai mare număr de utilizatori de pe internet.

Au venit cu CSS3. Typekit l-a inițiat și a dezvoltat unele dintre fonturile atrăgătoare și atrăgătoare pe care designerii web le pot folosi. Dar, erau prea costisitoare. Din fericire, Google a venit în ajutor și a oferit gratuit modele de fonturi strălucitoare și ușor de utilizat.

Canalizarea fontului potrivit!

În prezent, numărul de fonturi din biblioteca Google este de 647, ceea ce face dificilă filtrarea și alegerea pe cea potrivită. Cu toate acestea, cu acești 3 pași, puteți obține exact ceea ce aveți nevoie pentru site-ul dvs.:

• Aruncă o privire la fonturile recent actualizate de pe google și obține un font modern și fără erori. De asemenea, căutați fonturi folosite de majoritatea designerilor pentru a vă permite să aflați despre versatilitatea fonturilor pe care le puteți utiliza în mai multe stiluri și lățimi.
• Cunoașteți tipul pentru site-ul dvs. web, caracteristicile și stilul fonturilor pentru a vă îmbunătăți rezultatele.
• Rafinați căutarea fonturilor adăugând grosimea, înclinarea și lățimea caracterului ca opțiune de filtrare.

Selectarea fonturilor

În funcție de nevoile dvs., Google are mai multe metode pentru a vă ajuta să selectați un font. Pentru a alege fontul potrivit, luați în considerare:

Acces rapid - Pentru a arunca o privire rapidă asupra fontului care vă place

Pop Out- Pentru a afla mai multe despre font, adică funcționalitate și utilizări

Colecție-Dacă doriți să utilizați mai mult de două fonturi, faceți clic pe acest buton. Va adăuga toate fonturile care vă plac pe o singură pagină.

Cum să utilizați fonturile Google

După ce ați selectat fontul preferat, faceți clic pe fila „Utilizați” pentru a le vedea în acțiune. Apoi, copiați și inserați un cod pe pagina dvs. web. Veți avea trei opțiuni din care să alegeți:

Standard - Acesta este un link pentru foaia de stil standard. Plasați-l în partea de cap a fișierului HTML. Vă va economisi pasul de a adăuga regula @import, deoarece adăugați în mod semnificativ o foaie de stil care o are deja.

CSS - Folosiți regula CSS @import în cazul în care nu doriți să vă conectați la foaia de stil generată automat din antet . Utilizați codul de mai jos pentru a integra fonturile în CSS:

familia de fonturi: „Henry Pigeous”, serif;
font-family: „Diplomatic”. cursiv;

JavaScript -Google și Typekit, ambele au dezvoltat acest cod aici ca parte a Web Font loader pentru a oferi utilizatorilor mai mult control asupra încărcării fonturilor .

Luați un fragment HTML și puneți-l lângă antetul HTML ca:

Titlul paginii

Mergeți la CSS și urmați asta:

h1 {

font: 400 45px/0,5 'Diplomatic', Arial, sans-serif;

}

p {

font: 400 14px/1,5 „Henry Pegasus”, Times, serif;

}

Despre autor:
Catherine Garcia este un dezvoltator web cu experiență la Hosting Facts și un blogger pasionat. Îi place să-și împărtășească cunoștințele prin articolele sale despre dezvoltarea web și WordPress.