Kuinka käyttää Google-fontteja seuraavassa verkkosuunnitteluprojektissasi

Joten olet todennäköisesti kuullut, että Googlella on satoja ilmaisia ​​verkkofontteja, jotka ovat valmiita käytettäväksi seuraavassa projektissasi. Mutta miten käytät niitä verkkosivustollasi? Tässä artikkelissa käydään läpi vaiheet, jotka on toteutettava saadaksesi ne toimimaan verkkosivustollasi. Sen pitäisi kestää alle 10 minuuttia!

Mitä Google-fontit ovat?

"Google Fonts lanseerattiin ensimmäisen kerran vuonna 2010 teknisenä aloitteena webin eteenpäin viemiseksi ja nopeuttamiseksi." - Google Design

Google Fonts lanseerattiin vuonna 2010, ja siitä tuli nopeasti Internetin suurin, ilmainen, avoimen lähdekoodin fontti. Kaikki Google-fontit ovat ilmaisia ​​kaupalliseen ja henkilökohtaiseen käyttöön. Google Fonts -sivuston avulla kenen tahansa on helppo valita ja käyttää erilaisia ​​fontteja nopeasti omiin suunnittelutarpeisiinsa.

Kuka käyttää Google-fontteja?

Kaikki tekevät! Graafiset suunnittelijat, UX-suunnittelijat, tutkijat, kehittäjät, verkkosuunnittelijat, bloggaajat, sosiaalisen median johtajat, yrittäjät, taiteilijat, opiskelijat, opettajat, valokuvaajat ja monet muut. Olen nähnyt Google-kirjasimia, joita on käytetty mainostauluissa, julisteissa, esittelypaketeissa, häätkutsuissa, verkkosivustoissa ja kirjoissa.

Kuka luo fontit?

Google Fonts tekee yhteistyötä tyyppisuunnittelijoiden, valimoiden ja muotoiluyhteisön kanssa ympäri maailmaa. Nämä ihmiset ja organisaatiot suunnittelevat fontit, jotka näet Google Fontsissa. Esimerkiksi Łukasz Dziedzic on riippumaton kirjasintyyppisuunnittelija, joka on suunnitellut suositun kirjasintyypin Laton. ParaType-niminen kirjasintyyppivalimo suunnitteli kirjasintyypin PT Serif.

Miksi Google välittää kirjasimista?

Jokainen verkkosivuston Google Fonts -sovellusliittymälinkki antaa Googlelle mahdollisuuden tehdä enemmän tiedonlouhintaa. Kuulostaako se karkealta? Kyllä, mutta en usko, että sen pitäisi estää sinua käyttämästä Google-fontteja.

Toinen lohduttavampi syy, miksi Google välittää kirjasimista, on se, että he haluavat tehdä avoimen lähdekoodin web-kirjasimista massojen saataville. He haluavat tehdä nopeamman, kauniimman verkon, jota on helpompi navigoida ja käyttää. He aloittivat myös Google Fontsin vuonna 2010, kun tällaista palvelua tarvittiin kipeästi, joten he ratkaisivat vielä yhden ongelman, joka meillä oli Internetissä. #dontbeevil

Miksi minun pitäisi harkita niiden käyttöä?

Et voi voittaa ilmaiseksi. Olenko oikeassa? Sen lisäksi, että olet ilmainen, sinun kannattaa harkita Google-fonttien käyttöä seuraavassa verkkosuunnitteluprojektissasi, koska…

  • Fontit on helppo ottaa käyttöön verkkosivustollasi
  • Valittavana (ja laskevana) on yli 850 fonttia
  • Fonttien yleinen laatu paranee edelleen
  • Google-fontit ovat myös ladattavissa tulostettaviksi

Okei, okei, okei! Nyt miten käytät niitä.

Kuinka käyttää Google-fontteja - vaihe vaiheelta

1) Siirry Google Fonts -sivustolle

Käy Google Fonts -sivustolla, jossa voit valita 853 kirjasinperheestä ja laskea! Sivuston avulla voit suodattaa tuloksia kirjasintyylin, kielten, suosion ja painon mukaan. Google Fonts sisältää myös uusia fontteja, jos vierailet “suositellut” -sivulla.

2) Etsi haluamiasi fontteja

Jos sinulla on mielessä kirjasinperhe, voit etsiä sitä.

3) Napsauta “+”, kun olet valmis käyttämään sitä

Jokaisella kirjasinperheellä on plus-painike oikeassa yläkulmassa. Napsauta plus-painiketta lisätäksesi fonttiperheen "näytön laatikkoon", joka näkyy näytön alareunassa.

4) Toista vaiheet 1–3, jos haluat käyttää useampaa kuin yhtä kirjasinta

5) Napsauta "valintalaatikkoa" näyttääksesi kaikki valitsemasi fontit

Valintapaneelissa näet kaikki lisäämäsi kirjasimet. Sieltä löydät koodin, joka lisätään verkkosivustoosi. Voit myös ladata fontit työpöydällesi.

6) Valintapaneelista nappaat koodin, jonka kopioit / liität verkkosivustoihisi HTML- ja CSS-koodiksi

Kopioit valintalaatikosta koodin, joka liitetään HTML- ja CSS-tiedostoihisi. Jotta Google-fontit toimisivat verkkosivustollasi, sinulla on oltava sekä kirjasinperhe linkitetty Google Fonts -sovellusliittymään (HTML-muodossa), että fonttiperhe on määritettävä (CSS: ssä).

7) Lisää haluamasi kirjasinpainot ja tyylit napsauttamalla “muokkaa” -välilehteä

Tämä on viimeinen tilaisuutesi lisätä erilaisia ​​kirjasinpainoja ja tyylejä fonttiperheihisi ennen kuin lisäät ne verkkosivustoosi. Lisää vain tarvitsemasi kirjasinten painot ja tyylit, koska mitä enemmän fontteja lisäät, sitä hitaammin ne latautuvat sivustoosi.

8) Kopioi HTML-koodi ja liitä se verkkosivustoosi

Selvä, olemme melkein valmiita! Nyt meidän on vain kopioitava ja liitettävä HTML- ja CSS-koodi verkkosivustollesi. Kopioi ensin HTML-linkki HTML-dokumenttisi päähän.

9) Kopioi CSS-sääntö ja liitä se verkkosivustosi CSS-tiedostoon

Lopuksi meidän on myös kopioitava ja liitettävä CSS-säännöt CSS-tiedostoon. Jos lisäät yhden Google-fontin verkkosivustollesi, voit lisätä CSS-fonttiperheen säännöt vartiotunnisteeseesi. Muussa tapauksessa sinun on oltava varma, että lisäät sen CSS-tiedostojesi oikeisiin elementteihin.

10) Tallenna molemmat tiedostot (HTML ja CSS), päivitä sitten verkkosivustosi ja tarkastele uutta kirjasinta

Älä unohda tallentaa ja päivittää!

No niin! Olet ottanut ensimmäisen Google-fontin käyttöön verkkosivustollasi. Onnittelut, koodaa sinut. On reilua sanoa, että Google-fontit ovat pohjimmiltaan…

Lisää lukemista

  • Yuin Chienin "Google-fonttien uudelleenkuvittelu" (Google Design)
  • Hayden Millsin "6 vinkkiä parempaan fonttien pariliitokseen" (kirjasinpari)
  • Google-fonttien "Verkkofonttien valinta: Aloittelijan opas"

Kiitos lukemisesta

Jätä vapaasti kommentti alla tai ota yhteyttä minuun Twitterissä kysymyksillä ✌️

Olen myös Font Pairin luoja, joka auttaa sinua yhdistämään Google-fontit yhteen. Tutustu uuteen Medium-julkaisuomme lukeaksesi lisää typografiaviestejä!