Kako koristiti Google Fonts u sljedećem projektu web dizajna

Dakle, vjerojatno ste čuli da Google ima stotine besplatnih web fontova spremnih za upotrebu za vaš sljedeći projekt. Ali kako ih upotrebljavate na svojoj web stranici? Ovaj će vas članak provesti kroz korake koje treba poduzeti kako bi se pokrenuli na vašem web mjestu. Trebalo bi trajati manje od 10 minuta!

Što su Google fontovi?

"Google Fonts prvi je put pokrenut 2010. godine kao inženjerska inicijativa za pomicanje weba naprijed i brže." - Google dizajn

Google Fonts pokrenut je 2010. godine, brzo postajući najveći, besplatni, otvoreni izbor fontova na Internetu. Svi Googleovi fontovi besplatni su za komercijalnu i osobnu upotrebu. Web stranica Google Fonts svima olakšava brzi odabir i upotrebu različitih fontova za vlastite potrebe dizajna.

Tko koristi Google fontove?

Svi čine! Grafički dizajneri, UX dizajneri, istraživači, programeri, web dizajneri, blogeri, menadžeri društvenih mreža, poduzetnici, umjetnici, studenti, nastavnici, fotografi i mnogi drugi. Googleove fontove vidio sam na reklamnim panoima, plakatima, prezentacijskim prostorima, pozivnicama za vjenčanja, web stranicama i knjigama.

Tko stvara fontove?

Google Fonts surađuje s dizajnerima tipova, ljevaonicama tipova i dizajnerskom zajednicom širom svijeta. Ti ljudi i organizacije dizajniraju fontove koje vidite na Google fontovima. Na primjer, Łukasz Dziedzic neovisni je dizajner slova koji je dizajnirao popularni Lato. Ljevaonica tipičnih slova pod imenom ParaType dizajnirala je tipični sloj PT Serif.

Zašto Google brine o fontovima?

Svaka veza Google API-ja fontova na web mjestu pruža Googleu priliku za više pretraživanja podataka. Zvuči li to grubo? Da, ali mislim da vas to ne bi smjelo spriječiti u korištenju Google fontova.

Još jedan utješniji razlog zbog kojeg se Google brine za fontove je taj što oni žele učiniti web fontove otvorenog koda dostupnima masama. Žele napraviti bržu, ljepšu mrežu koja je lakša za navigaciju i upotrebu. Također su pokrenuli Google Fonts 2010. godine kada je ovakva usluga bila prijeko potrebna, pa su riješili još jedan problem koji smo imali na Internetu. #dontbeevil

Zašto bih trebao razmisliti o njihovoj upotrebi?

Ne možete pobijediti besplatno. Jesam li u pravu? Pored toga što ste besplatni, trebali biste razmisliti o upotrebi Google Fontova na sljedećem projektu web dizajna jer ...

  • Fontove je jednostavno implementirati na vašoj web stranici
  • Na izbor je više od 850 fontova (i brojanje)
  • Ukupna kvaliteta fontova nastavlja se povećavati
  • Google fontovi također se mogu preuzeti za tisak

Dobro, dobro, dobro! Sada o tome kako ih koristite.

Kako koristiti Google fontove - korak po korak

1) Idite na web mjesto Google Fonts

Posjetite web mjesto Google Fonts na kojem ćete moći birati između 853 obitelji fontova i brojati! Web stranica omogućuje filtriranje rezultata prema stilu fonta, jezicima, popularnosti i težini. Google fontovi također sadrže nove fontove ako posjetite stranicu "istaknuto".

2) Potražite fontove koji vam se sviđaju

Ako imate na umu prezime fonta, možete ga potražiti.

3) Kliknite "+" kada budete spremni za upotrebu

Svaka porodica fontova ima gumb plus u gornjem desnom kutu. Pritisnite gumb plus da biste dodali obitelj fontova u "ladicu za odabir" koja se pojavljuje na dnu zaslona.

4) Ponovite korake 1–3 ako tražite više od jednog fonta za upotrebu

5) Kliknite "odabirnu ladicu" da biste prikazali sve fontove koje ste odabrali

U "ladici za odabir" vidjet ćete sve fontove koje ste dodali. Tu ćete pronaći kod koji ćete dodati na svoje web mjesto. Također imate mogućnost preuzimanja fontova na radnu površinu.

6) "Izborna ladica" je mjesto gdje ćete zgrabiti kod koji ćete kopirati / zalijepiti u HTML i CSS kôd vaših web stranica

Iz "ladice za odabir" kopirat ćete kôd za lijepljenje u HTML i CSS. Da bi Google Fonts mogao raditi na vašoj web lokaciji, morate imati i obitelj fontova povezanu s API-jem Google Fonts (u HTML-u) i morate imati navedenu obitelj fontova (u CSS-u).

7) Dodajte različite težine i stilove fontova ako želite klikom na karticu "prilagoditi"

Ovo je vaša posljednja prilika da dodate različite težine i stilove fontova svojim obiteljima fontova prije nego što ih dodate na svoje web mjesto. Dodajte samo težine i stilove fontova za koje znate da će vam trebati, jer što više fontova dodate, to će se sporije učitavati na vašoj web lokaciji.

8) Kopirajte HTML kôd i zalijepite ga na svoje web mjesto

Dobro, skoro smo gotovi! Sve što trebamo sada je kopirati i zalijepiti HTML i CSS kôd na vaše web mjesto. Prvo kopirajte HTML vezu u glavu vašeg HTML dokumenta.

9) Kopirajte CSS pravilo i zalijepite ga u CSS datoteku svoje web stranice

Na kraju, također moramo kopirati i zalijepiti CSS pravila u vašu CSS datoteku. Ako za svoje web mjesto dodajete jedan Google Font, u oznaku tijela možete dodati pravila obitelji CSS fontova. U suprotnom, morat ćete biti sigurni da ga dodajete ispravnim elementima u CSS datotekama.

10) Spremite obje datoteke (HTML i CSS), a zatim osvježite svoje web mjesto i pogledajte novi font

Ne zaboravite spremiti i osvježiti!

Izvolite! Uspješno ste implementirali svoj prvi Google Font na svoju web stranicu. Čestitamo, kodirate vas. Pošteno je reći da su Google fontovi u osnovi ...

Više čitanja

  • “Reimagining Google Fonts” Yuina Chiena (Google Design)
  • "6 savjeta za bolje uparivanje fontova", Hayden Mills (Font Pair)
  • "Odabir web fontova: Vodič za početnike" tvrtke Google Fonts

Hvala na čitanju

Slobodno ostavite komentar ispod ili me kontaktirajte na Twitteru sa bilo kojim pitanjem ✌️

Također, tvorac sam parova fontova koji vam pomažu da uparite Google fontove. Kupite našu novu Medium publikaciju da biste pročitali više tipografskih postova!