Näin käytät Google Fontsia verkkosivustollasi

Google Fonts tarjoaa ilmaisia, verkkoon optimoituja fonttiperheitä, jotka voit upottaa sivustollesi. Tässä luvussa kerrotaan, miten Google Fontsia käytetään sivustolla ja brändimateriaaleissa.

Luonnos

Miksi jotkut brändit näyttävät heti luotettavilta, kun taas toiset vaikuttavat amatöörimäisiltä, vaikka tuotteet olisivat hyviä? Osa vastausta on Google Fonts verkkosivustoilla. Et tarvitse suunnittelijan koulutusta parantaaksesi tilannetta. Tarvitset selkeän määritelmän ja muutaman käytännön tarkistuksen.

Google Fonts tarjoaa ilmaisia, verkkoon optimoituja fonttiperheitä, jotka voit upottaa sivustollesi. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman jargonia. Näet myös, miten verkkoturvalliset fontit kuuluvat samaan kokonaisuuteen. Käydään se läpi askel askeleelta.

Mitä Google Fonts verkkosivustoille tarkoittaa käytännössä

Google Fonts tarjoaa ilmaisia, verkkoon optimoituja fonttiperheitä, jotka voit upottaa sivustollesi.

Verkosta ladattavat fontit yksinkertaistavat lisenssejä, mutta lisäävät verkkopyyntöjä, joita kannattaa seurata.

Parhaat fontit sivuston nopeuden kannalta löytyvät usein rajatusta määrästä paksuuksia.

Näin otat Google Fontsin käyttöön sivustollasi

Lataa vain ne paksuudet, joita käytät, kuten normaali ja lihavoitu, niin sivut pysyvät nopeina.

Aloita yhdestä sivusta, esimerkiksi etusivusta tai tärkeimmästä laskeutumissivusta. Korjaa suurin ongelma ensin ja vie sama ratkaisu sitten muihin pohjiin.

Lue tämän luvun parina typografian virheet perustaksi ja mitä on typografia seuraavaksi askeleeksi tässä osiossa.

Käytännön tarkistuslista, jonka voit ottaa käyttöön tänään

Lataa vain ne paksuudet, joita käytät, kuten normaali ja lihavoitu, niin sivut pysyvät nopeina.

Kun tarkastelet mitä tahansa sivua, mieti, näkyykö Google Fontsin käyttö onnistuneena jo ensimmäisellä vierityksellä puhelimessa. Jos ei, vaihda osioiden järjestystä, ennen kuin alat viimeistellä yksityiskohtia.

Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin opit, mikä muutos auttoi Google Fontsin kanssa sivustollasi.

Anna tämä lista kaikille, jotka päivittävät sivustoasi, jotta verkkoturvalliset fontit pysyvät yhtenäisinä uusillakin sivuilla.

Valitse tälle kuulle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin ulkoasun muutokset kytkeytyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.

Miten aihe liittyy laajempaan brändiisi

Visuaaliset valinnat eivät yleensä rajoitu yhteen sivuun. Parhaat fontit sivuston nopeuden kannalta löytyvät usein rajatusta määrästä paksuuksia.

Some-julkaisujesi, sähköpostiesi ja painotuotteidesi kannattaa noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.

Kun brändin visuaalinen ilme alkaa lipsua, asiakkaat tuntevat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.

Lue mitä on typografia, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.

Verkosta ladattavat fontit yksinkertaistavat lisenssejä, mutta lisäävät verkkopyyntöjä, joita kannattaa seurata.

Kysymykset, jotka usein jäävät huomaamatta

Lisähakusanat, kuten verkkoturvalliset fontit ja parhaat fontit verkkosivustolle, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin käytäntöihin.

Parhaat fontit sivuston nopeuden kannalta löytyvät usein rajatusta määrästä paksuuksia.

Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla julkaistulla sivulla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.

Kun tiimilläsi on yhteinen sanasto Google Fontsista verkkosivustoilla, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.

Työkalut, jotka helpottavat visuaalisia päivityksiä

Moniin asettelun ja tyylin ongelmiin et tarvitse omaa koodia. Visuaalisella editorilla voit säätää välejä, värejä ja kirjasimia ja esikatsella samalla puhelin- ja tietokonenäkymää.

WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.

Kun julkaiset päivityksiä, tarkista vielä typografian virheet ja brändifontti, niin osio pysyy yhtenä kokonaisuutena mielessäsi.

Sinulla on nyt toimiva näkökulma Google Fontsin käyttöön. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin brändifontti ja mitä on typografia, niin vauhti säilyy tässä osiossa.

Usein kysytyt kysymykset

Kauanko Google Fontsin käyttöönotto kestää?

Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.

Tarvitsetko suunnittelijan Google Fontsin käyttöön?

Suunnittelijasta on apua laajoissa brändiuudistuksissa, mutta moni Google Fontsiin liittyvä asia onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla typografian virheet, niin saat aiheesta lisää.

Voiko WEMASY auttaa Google Fontsin käytössä verkkosivustollasi?

WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutokset puhelimella.

Mikä on yleisin virhe Google Fontsin kanssa?

Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein asia, kuten luettavuus tai kontrasti, ja katso sitten brändifontti seuraavaa parannusta varten.

Miten Google Fonts liittyy SEO:hon?

Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät pidempään sivulla, mikä tukee merkkejä, joita hakukoneet seuraavat. Yhdistä ulkoasun korjaukset toimivaan sisältörakenteeseen, niin tulos on paras.

Mitä kannattaa lukea seuraavaksi Google Fontsin jälkeen?

Jatka tämän kirjan luvuilla typografian virheet ja brändifontti, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.

Ota se heti käyttöön
omalla verkkosivullasi.

Aloita ilmaiseksi WEMASYlla ja rakenna sivusi muutamassa minuutissa.