Cum să utilizați Fonturile Google în următorul proiect web și de ce ar trebui

Alegerea fonturilor este o decizie de proiectare integrală pe orice site web, dar de cele mai multe ori suntem mulțumiți de aceeași familie serifă și sans serifă. În timp ce corpul principal al textului ar trebui întotdeauna să fie ceva optimizat pentru lizibilitate, dacă nu doriți ca cititorii să aibă o durere de cap, titlurile și textul standout pot fi spațiul dvs. pentru a adăuga un design unic cu un anumit font de fler.

Citiți mai jos pentru a afla cum să utilizați oricare dintre Fonturile Google Web pe site-ul dvs..

fundal

Cu CSS, puteți specifica un lanț de fonturi pe care să îl utilizați dacă nu este disponibil. Acest lucru vă permite să aveți o primă alegere - poate un font mai puțin obișnuit, dar gratuit; apoi au loc backup-uri care vor fi întotdeauna acolo cu Windows sau Mac. Totuși, în general, designerii de web se vor lipi de lanțurile de familii ale caracterelor încercate și testate, după cum arată schițele W3.

În trecut, dacă se dorea un font diferit, designerii erau nevoiți să creeze imagini pentru text - logo-ul, anteturile etc. Dezavantajele sunt:

• Imaginile nu cresc bine.
• Imaginile nu pot fi citite de cititorii de ecran.
• Nu puteți evidenția textul în imagini.
• Motoarele de căutare nu pot “citit” imagini.
• Încărcarea imaginii încetinește pagina web.

Deci există o soluție mai bună? Unul care ne permite să folosim un set universal disponibil de fonturi gratuite, fără a recurge la imagini?

Fonturi Web Google

Răspunsul vine de la Google. Fonturile Google Web reprezintă, în esență, o colecție de (la numărul curent, 489) fonturi optimizate stocate în cloud, care pot fi încorporate în proiectele web (sau chiar descărcate pentru a fi utilizate pe calculatorul dvs.).

În plus, site-ul Google Web Fonts face ușor compararea și alegerea, apoi vă oferă tot codul de care aveți nevoie pentru a încorpora fontul prin Javascript sau CSS -.

Noțiuni de bază

Mergeți pe site-ul Web Fonturi și faceți clic pe începeți să alegeți fonturi a incepe.

Interfața este destul de auto-explicativă - în stânga puteți căuta anumite cuvinte cheie; și filtrarea după tipul de font de bază; sau filtrați pentru factori specifici, cum ar fi grosimea literei. Bara din partea de sus ajustează doar textul de previzualizare. Dacă aveți un anumit paragraf de text pe care doriți să îl testați, de exemplu, treceți la fila paragraf și inserați textul.

Așa cum am menționat, ești mai bine să nu alegi ceva prea fantezist pentru textul conținutului principal, așa că rămâi la familia serif sau sans-serif dacă chiar vrei să mergi pentru ceva unic acolo.

Când vedeți unul care vă place, adăugați-l la colecția dvs..

Apasă pe revizuire pentru a intra în modul de examinare și pentru a compara toate opțiunile dvs..

În modul de examinare, vi se afișează o varietate de dimensiuni de fonturi și fie un text paragraf sau titlu. Sistemul va face, de asemenea, o alegere inteligentă despre care să vă arătați în funcție de cazul tipic de utilizare al acelui font; dar puteți schimba modul de previzualizare dacă doriți.

Derulați spre dreapta pentru a vedea alte fonturi din colecția dvs. curentă; faceți clic pe X din partea dreaptă sus pentru a le respinge.

Încercați unitatea este un mod deosebit de interesant care va combina toate fonturile din colecția dvs. pentru a arăta cum ar putea arăta atunci când este combinată într-un aspect de bază al paginii.

OK, ales. Cum le folosesc?

Cu colecția dvs. restrânsă, faceți clic pe revizuire pe bara albastră mare. Dacă ați trecut peste bord și ați inclus prea multe (într-adevăr, păstrați-le la 2 la maximum), indicatorul de impact al încărcării paginii vă va avertiza.

Derulați în jos pentru a apuca codul relevant. Există 3 opțiuni aici:

• Standard (link rel = method): aceasta trebuie inserată în secțiunea HEAD a site-ului dvs., deci va trebui să vă simțiți confortabil cu HTML pentru a face acest lucru. Pentru WordPress, o veți adăuga header.php dacă alegeți astfel. Nu o recomand.
• @import: această metodă merge direct în fișierul dvs. de stil, unde vom specifica oricum fonturile pentru diferite elemente de pagină, așa că personal recomand acest lucru. Pentru temele WordPress, plasați-l style.css imediat după secțiunea de informații tematice
• Javascript: explicați - plasați codul oriunde în temă. Beneficiul utilizării acestei metode este că fontul va fi încărcat în mod asincron - site-ul va fi afișat mai întâi în fontul de rezervă, apoi va fi schimbat odată ce fontul a fost complet încărcat. Deși timpul inițial de încărcare a paginii va fi mai rapid, va crea o schimbare bruscă bruscă pentru utilizator, pe care nu o vreți.

Acesta este pasul 1. Pasul 2 este să specificați fontul în care doriți să îl utilizați. Noi nu avem loc pentru un tutorial complet CSS aici (sugerez aceste 5 site-uri CSS de învățare Top 5 site-uri pentru a învăța CSS Online Top 5 site-uri pentru a afla CSS Online Citiți mai multe, și propriile mele pași 5 copil în tutorial CSS 5 Pași pa Învățarea CSS și a deveni un Kick-Ass CSS Sorcerer 5 Pasi de Baby pentru a învăța CSS și a deveni un Kick-Ass CSS Sorcerer CSS este singurele pagini web cele mai importante schimbări pe care le-au văzut în ultimul deceniu și a pregătit calea pentru separarea stilului și În mod modern, XHTML definește structura semantică ... Citește mai mult), dar este suficient să spui că vei adapta ceva în foaia de stil care spune familie de fonturi, și asigurați-vă că includeți stilul de rezervă sugerat de Google.

Optimizat

Utilizarea unui font non-standard, pe care utilizatorul trebuie să îl descarce, va adăuga o cantitate mică de timp încărcării paginii - ceea ce este inevitabil. Cu toate acestea, un font tipic de pe web de la Google este de aproximativ 100KB - pentru comparație, este vorba de dimensiunea unei imagini jpeg de dimensiuni medii de bună calitate. Ca și imaginile, fontul web va fi stocat în memoria cache în browser-ul utilizatorului, astfel încât numai încărcarea inițială a paginii va fi ușor întârziată.

rezumat

Recunosc - îmi place foarte mult fonturile. Ma astept ca multi dintre voi, am tendinta de a le horde pe hard disk-ul meu - doar pentru caz, știți?! Acum pot să folosesc niște fonturi unice în proiectele mele web - sunt emoționat. Vă rog, nu neglija fonturile de pe site-ul dvs.!

Dacă aveți întrebări legate de implementarea fonturilor web pe site-ul dvs., nu ezitați să întrebați comentariile și văd dacă vă pot ajuta.