de Hayden Mills

Așa că probabil ați auzit că Google are sute de fonturi web gratuite gata să fie utilizate pentru următorul dvs. proiect. Dar cum le folosiți pe site-ul dvs. web? Acest articol vă va ajuta să parcurgeți pașii de urmat pentru a le face să ruleze pe site-ul dvs. web. Ar trebui să dureze mai puțin de 10 minute!

Ce sunt Google Fonts?

„Google Fonts lansat pentru prima dată în 2010 ca o inițiativă de inginerie pentru a muta web înainte și a-l face mai rapid. ” – Google Design

Google Fonts a fost lansat în 2010, devenind rapid cea mai mare selecție gratuită de fonturi pe internet, gratuită. Toate fonturile Google sunt gratuite pentru uz comercial și personal. Site-ul Google Fonts face ușor pentru oricine să selecteze și să utilizeze rapid diferite fonturi pentru propriile nevoi de proiectare.

Cine folosește Google Fonts?

Toata lumea face! Designeri grafici, designeri UX, cercetători, dezvoltatori, designeri web, bloggeri, manageri de social media, antreprenori, artiști, studenți, profesori, fotografi și mulți alții. Am văzut Google Fonts folosite pe panouri, afișe, punți de prezentare, invitații de nuntă, site-uri web și cărți.

Cum sa utilizati Google Fonts in urmatorul dvs proiect de
Toată lumea și mama lor folosesc Google Fonts

Cine creează fonturile?

Google Fonts colaborează cu designeri de tipuri, turnătorii de tipuri și comunitatea de design din întreaga lume. Acești oameni și organizații proiectează fonturile pe care le vedeți pe Google Fonts. De exemplu, Łukasz Dziedzic este un designer independent de tipare care a proiectat tipul popular de caractere, Lato. O turnătorie de caractere numită ParaType a proiectat fontul PT Serif.

De ce îi pasă Google de fonturi?

Fiecare link Google Fonts API de pe un site web oferă Google oportunitatea de a face mai multe date mining. Sună grosolan? Da, dar nu cred că ar trebui să vă împiedice să utilizați Google Fonts.

Un alt motiv mai reconfortant căruia Google îi pasă de fonturi este că vor să facă fonturile web open-source accesibile pentru masă. Vor să creeze un web mai rapid, mai frumos și mai ușor de navigat și de utilizat. De asemenea, au început Google Fonts încă din 2010, când un serviciu ca acesta era foarte necesar, așa că au rezolvat încă o problemă pe care o aveam pe internet. #dontbeevil

1611877447 692 Cum sa utilizati Google Fonts in urmatorul dvs proiect de
Sursă – fonts.google.com/about

De ce ar trebui să iau în calcul utilizarea lor?

Nu poți bate liber. Am dreptate? Pe lângă faptul că sunteți gratuit, ar trebui să luați în considerare utilizarea Google Fonts pentru următorul dvs. proiect de web design, deoarece …

  • Fonturile sunt ușor de implementat pe site-ul dvs. web
  • Există peste 850 de fonturi pentru a alege (și numărare)
  • Calitatea generală a fonturilor continuă să crească
  • Google Fonts sunt, de asemenea, descărcabile pentru imprimare

Bine, bine, bine! Acum, despre modul în care le folosiți.

Cum se utilizează Google Fonts – Pas cu pas

1) Accesați Site-ul Google Fonts

Vizitați site-ul web Google Fonts, unde veți putea alege dintre 853 de familii de fonturi și numărând! Site-ul web vă permite să filtrați rezultatele după stilul fontului, limbi, popularitate și greutate. Google Fonts oferă, de asemenea, fonturi noi dacă vizitați Pagina „prezentată”.

1611877447 620 Cum sa utilizati Google Fonts in urmatorul dvs proiect de
fonts.google.com

2) Căutați fonturile care vă plac

Dacă aveți în minte un nume de familie de fonturi, îl puteți căuta.

Cum sa utilizati Google Fonts in urmatorul dvs proiect de

3) Faceți clic pe „+” când sunteți gata să-l utilizați

Fiecare familie de fonturi are un buton plus în colțul din dreapta sus. Faceți clic pe butonul plus pentru a adăuga familia de fonturi în „sertarul de selecție” care apare în partea de jos a ecranului.

1611877447 149 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

4) Repetați pașii 1–3 dacă căutați mai multe fonturi de utilizat

5) Faceți clic pe „sertarul de selecție” pentru a afișa toate fonturile pe care le-ați ales

„Sertarul de selecție” este locul în care veți vedea toate fonturile pe care le-ați adăugat. Aici veți găsi codul de adăugat pe site-ul dvs. web. De asemenea, aveți opțiunea de a descărca fonturile pe desktop.

1611877448 88 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

6) „Sertarul de selecție” este locul în care veți prelua codul pe care îl veți copia / lipi în site-urile dvs. HTML și cod CSS

Din „sertarul de selecție”, veți copia codul de lipit în HTML și CSS. Pentru ca Google Fonts să funcționeze pe site-ul dvs. web, trebuie să aveți atât familia de fonturi legată de API-ul Google Fonts (în HTML), cât și familia de fonturi specificată (în CSS).

1611877448 16 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

7) Adăugați diferite greutăți și stiluri de font, dacă doriți, făcând clic pe fila „personalizați”

Aceasta este ultima dvs. șansă de a adăuga diferite greutăți și stiluri de fonturi familiilor dvs. de fonturi înainte de a le adăuga pe site-ul dvs. web. Adăugați doar greutățile fonturilor și stilurile de care știți că veți avea nevoie, deoarece cu cât adăugați mai multe fonturi, cu atât mai încet vor fi încărcate pe site-ul dvs.

1611877448 91 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

8) Copiați codul HTML și lipiți-l în a site-ului dvs. web

Bine, aproape am terminat! Tot ce trebuie să facem acum este să copiați și să lipiți codul HTML și CSS în site-ul dvs. web. Mai întâi, copiați linkul HTML în capul documentului HTML.

1611877448 93 Cum sa utilizati Google Fonts in urmatorul dvs proiect de
1611877449 432 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

9) Copiați regula CSS și lipiți-o în fișierul CSS al site-ului dvs. web

În cele din urmă, trebuie să copiem și să lipim regulile CSS în fișierul dvs. CSS. Dacă adăugați un singur font Google pentru site-ul dvs. web, puteți adăuga regulile familiei de fonturi CSS în eticheta corpului. În caz contrar, va trebui să vă asigurați că îl adăugați la elementele corecte din fișierele CSS.

1611877449 241 Cum sa utilizati Google Fonts in urmatorul dvs proiect de
1611877449 645 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

10) Salvați ambele fișiere (HTML și CSS), apoi reîmprospătați site-ul web și vizualizați noul font

Nu uitați să salvați și să reîmprospătați!

1611877449 509 Cum sa utilizati Google Fonts in urmatorul dvs proiect de
Reîmprospătați fișierele locale și ar trebui să vedeți noua familie de fonturi … în acest caz se numește un font Google Lato.

Poftim! Ați implementat cu succes primul dvs. font Google pe site-ul dvs. web. Felicitări, te codifici. Este corect să spunem că Google Fonts sunt practic …

1611877450 771 Cum sa utilizati Google Fonts in urmatorul dvs proiect de

Mai multe lecturi

Mulțumesc pentru lectură

Nu ezitați să lăsați un comentariu mai jos sau contactează-mă pe Twitter cu orice întrebări ✌️

De asemenea, sunt creatorul Pereche de fonturi, care vă ajută să asociați Google Fonts împreună. Verifică noua noastră publicație Medium pentru a citi mai multe postări tipografice!

1611877450 784 Cum sa utilizati Google Fonts in urmatorul dvs proiect de