Kuidas kasutada Google'i fonte oma järgmises veebidisaini projektis

Nii et olete ilmselt kuulnud, et Google'il on teie järgmise projekti jaoks kasutamiseks valmis sadu tasuta veebifonte. Aga kuidas neid oma veebisaidil kasutada? Selles artiklis tutvustatakse juhiseid nende veebisaidil töötamiseks. See peaks võtma vähem kui 10 minutit!

Mis on Google'i fondid?

"Google Fonts käivitas esmakordselt 2010. aastal insenerialgatuse, et veebi edasi arendada ja kiirendada." - Google'i disain

Google Fonts käivitus 2010. aastal, muutudes kiiresti Interneti suurimaks, avatud lähtekoodiga fondivalikuks. Kõik Google'i fondid on äriliseks ja isiklikuks kasutamiseks tasuta. Veebisaidi Google Fonts abil on kõigil hõlbus erinevaid fonte kiiresti oma disainivajaduste jaoks valida ja kasutada.

Kes kasutab Google'i fonte?

Kõik teevad! Graafilised disainerid, UX-i disainerid, teadlased, arendajad, veebidisainerid, blogijad, sotsiaalmeedia juhid, ettevõtjad, kunstnikud, üliõpilased, õpetajad, fotograafid ja palju muud. Olen näinud Google'i fonte, mida kasutatakse reklaamtahvlitel, plakatitel, esitlustekidel, pulmakutsetel, veebisaitidel ja raamatutes.

Kes loob fondid?

Google Fonts teeb koostööd tüübikujundajate, tüüpi valukodade ja disainiringkondadega üle kogu maailma. Need inimesed ja organisatsioonid kujundavad fonte, mida näete Google Fontsis. Näiteks on Łukasz Dziedzic sõltumatu kirjatüüpide kujundaja, kes kujundas populaarse kirjatüübi Lato. Kirjatüüpi valukoda ParaType kujundas kirjatüübi PT Serif.

Miks hoolib Google fontidest?

Iga veebisaidi Google Fonts API link annab Google'ile võimaluse rohkem andmekaevandusi teha. Kas see kõlab jämedalt? Jah, kuid ma ei arva, et see peaks teid takistama Google'i fontide kasutamist.

Teine lohutavam põhjus, miks Google hoolib fontidest, on see, et nad tahavad muuta avatud lähtekoodiga veebifondid massidele kättesaadavaks. Nad tahavad teha kiirema ja ilusama veebi, mida on lihtsam navigeerida ja kasutada. Samuti alustasid nad Google Fontsiga 2010. aastal, kui sellist teenust oli väga vaja, nii et nad lahendasid veel ühe probleemi, mis meil Internetis tekkis. #dontbeevil

Miks peaksin kaaluma nende kasutamist?

Vabaks ei saa. Kas mul on õigus? Lisaks tasuta olemisele peaksite kaaluma järgmise veebidisaini projekti puhul Google Fonts'i kasutamist, sest…

  • Fonte on teie veebisaidil lihtne rakendada
  • Valida (ja arvestada) on üle 850 fondi
  • Fondide üldine kvaliteet kasvab jätkuvalt
  • Google'i fondid on allalaaditavad ka printimiseks

Okei, okei, okei! Nüüd, kuidas neid kasutada.

Google'i fondide kasutamine - samm-sammult

1) Minge Google Fonts'i veebisaidile

Külastage Google'i fontide veebisaiti, kus saate valida 853 fondiperekonna ja koguarvu vahel! Veebisait võimaldab teil filtreerida tulemusi fondi stiili, keelte, populaarsuse ja kaalu järgi. Google Fonts sisaldab ka uusi fonte, kui külastate esiletõstetud lehte.

2) Otsige endale sobivaid fonte

Kui teil on meeles fontide perekonnanimi, saate seda otsida.

3) Kui olete selle kasutamiseks valmis, klõpsake nuppu „+”

Igal fondiperekonnal on paremas ülanurgas plussnupp. Klõpsake plussnuppu, et lisada fondipere ekraani allosas kuvatavasse „sahtlisse“.

4) Korrake samme 1–3, kui otsite kasutamiseks mitut fonti

5) Kõigi valitud fontide kuvamiseks klõpsake valimissahtlit

Valikukastis näete kõiki lisatud fonte. Sealt leiate oma veebisaidile lisatava koodi. Samuti on teil võimalus fondid töölauale alla laadida.

6) „Valikusahtlist” haarate koodi, mille kopeerite / kleebite oma veebisaitidele HTML ja CSS kood

„Valikusahtlist” kopeerite koodi, et kleepida see oma HTML-i ja CSS-i. Selleks, et Google Fonts teie veebisaidil töötaks, peab teil olema nii fontide perekond lingitud Google Fonts API-ga (HTML-is) kui ka teil peab olema määratud fondipere (CSS-is).

7) Soovi korral lisage erinevad fondi kaalud ja stiilid, klõpsates vahekaarti „Kohanda”

See on teie viimane võimalus enne oma veebisaidile lisamist oma fontide perekondadele lisada erinevaid fontide kaalu ja stiile. Lisage ainult vajalikke fondikaalusid ja stiile, sest mida rohkem fonte lisate, seda aeglasemalt nad teie saidile laadivad.

8) Kopeerige HTML-kood ja kleepige see oma veebisaidile

Hästi, oleme peaaegu valmis! Kõik, mida peame nüüd tegema, on HTML- ja CSS-koodi oma veebisaidile kopeerimine ja kleepimine. Esmalt kopeerige HTML-link oma HTML-dokumendi pähe.

9) Kopeerige CSS-reegel ja kleepige see oma veebisaidi CSS-faili

Lõpuks peame ka CSS-reeglid oma CSS-faili kopeerima ja kleepima. Kui lisate oma veebisaidile ühe Google'i fondi, saate CSS-i fondipere reeglid oma kehamärgendisse lisada. Vastasel juhul peate olema kindel, et lisate selle oma CSS-failide õigetele elementidele.

10) Salvestage mõlemad failid (HTML ja CSS), seejärel värskendage oma veebisaiti ja vaadake uut fonti

Ärge unustage salvestamist ja värskendamist!

Seal sa lähed! Olete oma esimese Google'i fondi oma veebisaidil edukalt juurutanud. Palju õnne, kodeerite teid. On õiglane öelda, et Google'i fondid on põhimõtteliselt…

Rohkem lugemist

  • Yuin Chieni (Google'i fontide ümberkujundamine) (Google Design)
  • Hayden Millsi (6 paari näpunäiteid fondi paremaks sidumiseks) (fondipaar)
  • Google Fondsi artikkel „Veebifondide valimine: juhend algajatele“

Täname lugemast

Jäta julgelt allpool kommentaar või võta minuga Twitteris küsimusi any️

Samuti olen ma Font Pairi looja, mis aitab teil Google Fonte omavahel siduda. Vaadake meie uut keskmist väljaannet, et lugeda veel tüpograafilisi postitusi!