Wordpress

15 beste Google-fonter etter tallene i 2021 (pluss tips om hvordan du bruker dem)

Det er 1052 forskjellige Google Font-familier tilgjengelig gratis (i skrivende stund denne artikkelen). Det er mange valg! Så det er ikke rart at du trenger hjelp til å finne den nålen i en høystakk med en liste over de beste Google-fontene.

Vi har det for deg, og så deler vi også noen beste fremgangsmåter for bruk av Google Fonts i WordPress.

Å velge en skrifttype er mer enn bare et estetisk valg – det kan ha en betydelig effekt på nettstedets fluktfrekvenser og konverteringsfrekvenser, spesielt hvis du velger en skrifttype som er vanskelig å lese. Derfor lønner det seg å bruke litt tid på å velge den perfekte Google Fonts-familien for nettstedet ditt, i stedet for å bruke den første fonten du kommer over.

Hvis du trenger enda flere fonter, se på innlegget vårt om 50+ moderne fonter å bruke på WordPress-nettstedet ditt.

Hvorfor bruke Google Fonts?

Det er tusenvis av fontlagre på internett, så hva er det egentlig som gjør Google Fonts så spesiell?

Google Fonts-katalog.
Google Fonts-katalog.

For det første er det gratis! I tillegg vedlikeholdes og leveres Google Fonts av Google, noe som betyr at de er garantert trygge. Selvfølgelig er det mange skumle nettsteder hvor du kan laste ned gratis fonter, men hvem vet hva annet du vil plukke opp med disse filene?

Kvaliteten på skrifttyper på slike nettsteder kan noen ganger også være tvilsom.

Google har kuratert et utvalg av over tusen fonter av høy kvalitet. Når du ikke er en grafisk designer med et perfekt øye for typografi, er det et tryggere valg.

For det andre er det ingen innviklede lisensieringsbegrensninger. Alle fonter i Google Fonts-katalogen er åpen kildekode og gratis å bruke i kommersielle prosjekter. Du kan laste ned eller bygge dem inn på nettstedet ditt, og du kan til og med bruke dem i utskriftsprosjekter.

Selv om det ikke er noen enhetlig lisens, bruker de fleste fonter i depotet Open Font License.

Åpne Font License.
Åpne Font License.

Andre "gratis fonter" er sjelden gratis og kommer med en hel rekke forvirrende lisensieringsbegrensninger som kan havne deg i varmt vann hvis du gjør en feil. Dessverre kommer ikke Google Fonts med den samme bagasjen.

Og til slutt, det er enkelt å legge til Google Fonts på nettstedet ditt ved å bruke Google Fonts API. Alternativt kan du laste dem ned individuelt og laste dem opp til webserveren din via FTP/SFTP.

Mens Google Fonts har en tendens til å være enkle og kanskje ikke så prangende som noen betalte fonter, slår det absolutt nettsikre fonter som kommer forhåndsinstallert med store operativsystemer, de samme skriftene alle har sett tusenvis av ganger før.

Det er 1052 forskjellige Google Font-familier tilgjengelig gratis ... føler du deg overveldet ennå? 🤯 Begrens valgene dine med hjelp fra dette innlegget 👇Klikk for å Tweet

Hva du skal se etter i en Google-font

Hvis det er én ting du bør lære når du designer et nettsted, er det hvordan du velger en Google-font som passer for prosjektet ditt. God typografi vil gjøre eller ødelegge nettstedet ditt.

Det kan virke som en uviktig detalj, men det kan være forskjellen mellom at noen forlater nettstedet ditt tidlig eller holder seg til å bli en lojal leser eller kunde.

Å velge riktig skrifttype er noe grafiske designere bruker mange år på å mestre, men med noen få prinsipper i bakhodet, kan du velge en vakker skrift for nettstedet ditt.

  • Passer til ditt merke: Dette kan være det mest kritiske aspektet. De beste nettstedene har en skrifttype som viser frem deres personlighet, samtidig som de er lesbare og passer inn i dagens design. For eksempel bruker Apple og Iron Maiden vidt forskjellige fonter, men de passer begge til merket deres.
  • lesbarhet: Det nest mest avgjørende prinsippet er lesbarhet. En sprø fantasi eller grungy skrift kan sikkert passe merkevaren din, men hvis de besøkende ikke kan lese den, vil de være raske til å forlate. Derfor må skriftene dine være profesjonelle og leselige.
  • Skriftklassifisering: Selv om det er hundrevis av måter å klassifisere en skrift på, er disse de fem hovedtypene: serif, sans-serif, script, monospace og dekorative. En skrift- eller serif-font formidler eleganse, mens monospace-fonter er populære på tekniske nettsteder. Å kjenne til disse klassifiseringene vil gi deg et bedre utgangspunkt i søket.
  • Skjerm eller Brødskrift: Visningsfonter er for store størrelser, overskrifter eller utskriftsprosjekter. De har råd til å være mindre leselige av hensyn til unik design. Hoveddirektivet for skrifttyper er lesbarhet, siden de utgjør hoveddelen av nettstedet ditt.
  • Stemning og hensikt: Akkurat som ethvert kunstnerisk arbeid, designer kunstnere fonter for bestemte stemninger og innstillinger. De fleste fonter kommer med notater om hvordan de ble utformet og hvordan du kan bruke dem. Bruk dem til å avgjøre om fonten passer til prosjektet ditt.

De 10 beste Google-fontene i 2021 (Ifølge mengdenes visdom)

Så hvordan lager du en liste over de beste Google-fontene når så mye av dette er subjektivt? Vi vil ikke at hele denne listen skal være partisk, så vi går med dataene for å bygge en liste over de mest populære Google-fontene.

Vi bruker Google Fonts-analyse for å stole på mengdenes visdom. Med over 50 billioner fontvisninger totalt, har Google bare litt data å hente fra.

Deretter går vi litt utover de rå popularitetstallene og velger noen kommende HTML-fonter som blir stadig mer populære.

Klar? La oss dykke inn!

1. Roboto

Roboto.
Roboto.

Den langvarige #1-plassen og BehmasterRoboto er et sans-serif-tilbud fra Christian Robertson som Google utviklet som systemfont for Android. Den er nå enormt populær, kommer i 12 forskjellige stiler, og dukker opp flere ganger i Google Fonts-analysen.

For eksempel er Roboto den mest populære fonten. Men Roboto Condensed er også den sjette mest populære fonten, og Roboto Slab dukker også opp som nummer 12!

2. åpne Sans

Åpen uten.
Åpen uten.

Open Sans Condensed er en svært lesbar font bestilt av Google og inspirert av forgjengeren Droid Sans. Google bruker Open Sans på noen av nettstedene sine og på papir- og nettannonser. Open Sans Condensed, søsterfonten her, har også den trettende mest populære plassen på Google Fonts.

3. Lato

Lato.
Lato.

Lato er et annet populært valg fra Łukasz Dziedzic. Den har hele historien bak designet, og balanserer motstridende mål, noe som resulterer i en unik, lett sans-serif-font.

4. Montserrat

Monsterserrat.
Monsterserrat.

Montserrat er en sans-serif-font fra Julieta Ulanovsky, som bor i det navngitte Montserrat-området i Buenos Aires. Med 18 forskjellige stiler som spenner fra lett til tung, har du ganske mye valg.

5. Oswald

Osvald.
Osvald.

Oswald er en sans-serif-font som opprinnelig ble utviklet av Vernon Adams. Den ble designet med den distinkte alternative gotiske stilen i tankene, tydeliggjort av dens dristige streker.

6. Kilde uten Pro

Kilde Sans Pro.
Kilde Sans Pro.

Source Sans Pro er en sans-serif-font laget for Adobe og Adobes første åpen kildekode-font. Laget av Paul Hunt, den lette bokstaven gjør den ren og lesbar.

7. Slabo 27px/13px

Slabo.
Slabo.

Slabo er en serif-font utviklet av John Hudson fra Tiro Typeworks. Denne skriften er spesielt designet for visse størrelser - enten 27px eller 13px, avhengig av dine behov.

8. Raleway

Raleway
Raleway

Med 18 forskjellige stiler er Raleway en annen sans-serif-font for store familier, opprinnelig laget av Matt McInerney. Hvis du liker Raleway og ser etter noe unikt, tilbyr Raleway Dots lignende styling med en prikkete tilnærming som kan fungere for store overskrifter.

9. PT uten

PT Uten.
PT Uten.

PT Sans ble utviklet for de offentlige typene i Russland og inkluderer som sådan både latinske og kyrilliske tegn. Det er også flere andre fonter i PT-familien, inkludert noen serif-alternativer.

10. Merriweather

Merriweather.
Merriweather.

Merriweathers navn fremkaller ideen om et hyggelig design, og det er akkurat det designerne hadde til hensikt. Selv om det ikke er fullt så populært, er Merriweather Sans et søsterprosjekt som passer eksepsjonelt godt med det.

Bonusfonter + kommende

Med tallene er de ti fontene ovenfor de mest populære Google-fontene. Men bare å vise de mest populære alternativene gjør en bjørnetjeneste for flotte kommende fonter som ikke har fått eksponeringen til å dukke opp i analysene.

Her er noen av våre favoritter som ikke dukket opp på toppen av analysene.

11. Noto Sans / Serif

Noto Sans / Serif.
Noto Sans / Serif.

Noto er en Google-oppdragsskrift som kommer i både serif- og sans-serif-versjoner. Den mottar jevnlige oppdateringer, og det er nå godt over 100 Noto-fonter, og flere kommer hele tiden!

Notos mål er å dekke alle alfabetene og tegnene fra forskjellige språk, mens dens distinkte design harmoniserer på tvers av hundrevis av forskjellige skriftfamilier. Disse derivatene inkluderer de populære Noto Sans KR og Noto Sans JP.

12. Nunito Sans

Nunito Sans.
Nunito Sans.

Nunito Sans er et sans-serif-alternativ som vokser raskt i popularitet. Bruken tredoblet seg mellom 2018 og 2019, og den blir bare mer populær for hvert år.

13. Konsert en

Konsert en.
Konsert en.

Concert One er en avrundet grotesk skrifttype som er et fantastisk alternativ for overskrifter. Dens ukonvensjonelle design vil garantert trekke øynene.

14. Spør

Tekst.
Tekst.

Prompt er et sans-serif-tilbud fra det thailandske kommunikasjonsdesignfirmaet Cadson Demak. Den er sløyfeløs (den thailandske ekvivalenten til sans-serif) og inkluderer både thailandske og latinske tegn.

15. Work Sans

Work Sans.
Work Sans.

Work Sans er en sans-serif font optimalisert for bruk på skjermer. Designerne anbefaler å bruke mellomvektstilene for alt fra 14px-48px.

Trenger du lynrask, pålitelig og helt sikker hosting for WordPress-nettstedet ditt? Behmaster gir alt dette og 24/7 verdensklasses støtte fra WordPress-eksperter. Sjekk ut planene våre

Hvordan lage de beste Google Fonts-kombinasjonene

Hvis du syntes det var vanskelig å prøve å velge én font fra Google Fonts, vent til du prøver å koble dem sammen på nettstedet ditt! Heldigvis er ikke dette et problem du må løse (med mindre du vil). Du kan bruke et par måter å komme opp med de beste Google Fonts-kombinasjonene.

For det første vil Google Fonts-nettstedet selv foreslå populære sammenkoblinger hvis du blar nedover siden:

Oppdag populære Google Fonts-sammenkoblinger.
Oppdag populære Google Fonts-sammenkoblinger.

Utover det kan du også bruke et nettsted som Font Pair for å få flere forslag.

Beste praksis for bruk av Google Fonts på WordPress

Når du har funnet de perfekte fontene for prosjektet ditt, her er noen beste fremgangsmåter for bruk av Google Fonts på WordPress.

Begrens antall skriftvekter du bruker

Noen av disse skriftene - som Montserrat og Raleway - kommer med 18 forskjellige skriftvekter. Selv om det er bra for å gi deg alternativer, ønsker du ikke å laste alle 18 vektene på WordPress-siden din fordi det vil senke lastetidene dine.

Det er veldig viktig å følge denne retningslinjen!

For de fleste fonter er en god tommelfingerregel å bruke maksimalt tre vekter:

  • Regelmessig
  • Kursiv
  • Fet

Mange WordPress-nettsteder vi ser i dag hopper til og med kursiv og går bare med to forskjellige skriftvekter.

Hvis du bygger inn Google Fonts selv, kan du velge nøyaktig hvilke vekter som skal inkluderes. Gå først til en skriftside og klikk deretter Velg denne stilen ved siden av de du vil ha.

Velge en font i Google Fonts.
Velge en font i Google Fonts.

De fleste WordPress-temaer i dag inkluderer enkle måter å velge hvilke Google-fonter og -vekter du vil bruke. Men ikke alle temautviklere er fokusert på ytelse. Så i noen tilfeller kan det være bedre å deaktivere Google Fonts i temaet ditt og legge dem til selv.

Variable fonter begynner også å bli populære og støttes av alle moderne nettlesere. Disse er fantastiske fordi de lar en skriftfil transformeres med forskjellige egenskaper. Google Fonts har mange variable fonter å velge mellom, og du kan til og med begrense søket til de spesifikt.

"Innstilling

Vurder å være vert for Google Fonts lokalt

Som et alternativ til å vise fonter fra Googles server, kan du også være vert for fonter lokalt, noe som gir ytelsesfordeler. Husk imidlertid at de fleste Google-fonter sannsynligvis allerede er bufret i folks nettlesere. Så vi anbefaler å gjøre ytelsestestene dine.

Hvis du bruker en annen premium-font enn Google-fonter, for eksempel "Brandon"-fonten vi bruker på Behmaster nettstedet, å være vert for dem lokalt (og betjene dem fra CDN-en din) er den beste ruten. For mer om dette emnet, sjekk ut innleggene våre om hvordan du kan være vert for fonter lokalt.

Velg en skrifttype som vil få oppdateringer

Fonter er akkurat som WordPress-plugins og -temaer - over tid mottar de oppdateringer og forbedringer for å gjøre dem enda bedre. Og selv om innsatsen ikke er på langt nær så alvorlig som WordPress-plugins, kan det fortsatt være fordelaktig å velge en skrifttype som mottar regelmessige oppdateringer. For eksempel har Noto-familien fra Google fått jevnlige oppdateringer siden 2014.

Fordi de fleste fontene på denne listen er populære, er det sannsynligvis et godt bud at enhver font på denne listen vil motta regelmessige oppdateringer og forbedringer. Og hvis du bestemmer deg for å gå utenfor listen, er det aldri en dårlig idé å sørge for at hvilken skrift du velger er populær nok til å få oppmerksomhet.

Ikke glem tilgjengelighet

Ifølge Verdens helseorganisasjon, ifølge data samlet i 2015, lever anslagsvis 253 millioner mennesker med nedsatt syn: 36 millioner er blinde, og 217 millioner har moderat til alvorlig synshemming. I tillegg har antallet personer med en eller annen form for svekkelse steget til 2.2 milliarder per 2021.

Når du bruker Google Fonts, får du kontrollere hvordan det ser ut med CSS, for eksempel farge og størrelse. Så ikke glem å følge Web Content Accessibility Guidelines (WCAG) 2.0. Det vil sikre at innholdet ditt er lett tilgjengelig for alle.

Å følge disse retningslinjene vil gjøre innhold tilgjengelig for et bredere spekter av funksjonshemmede, inkludert blindhet og nedsatt syn, døvhet og hørselstap, lærevansker, kognitive begrensninger, begrenset bevegelse, talevansker, lysfølsomhet og kombinasjoner av disse. – Retningslinjer for tilgjengelighet på nettinnhold (WCAG) 2.0

En kritisk retningslinje er fargekontrasten. Fonten vår var litt for lett i forhold til en eldre design av Behmaster nettstedet, og besøkende ga uttrykk for sine bekymringer da det gjorde det vanskelig å lese. Det siste du vil gjøre er å publisere fantastisk innhold, bare for å få det til å bli en belastning for folks øyne!

Du kan bruke et verktøy som Color Contrast Checker fra WebAIM for å se om skriftfargene dine passer de offisielle anbefalingene. Du kan for eksempel se at fargene på blogginnleggene våre nå besto testen. 👍

Fargekontrastkontrollverktøy.
Fargekontrastkontrollverktøy. 

Hvordan legge til Google Fonts til WordPress

Med en eller to skrifttyper valgt ut, er det siste trinnet å legge den til på nettstedet ditt. Takket være Google Fonts er denne oppgaven enda enklere enn vanlig.

Anta at du ønsker å få en font på nettstedet ditt. I så fall har du tre alternativer: installere en plugin som Easy Google Fonts eller Google Fonts Typography, bruke Google Fonts API for å laste opp skriften til nettstedet ditt, eller manuelt laste det ned og hoste det på nettstedet ditt.

Hvis du trenger å vite hvordan du endrer skriftene dine i WordPress, har vi skrevet en detaljert veiledning for å hjelpe deg.

Å velge en skrifttype er mer enn bare et estetisk valg – det kan ha en betydelig effekt på nettstedets fluktfrekvenser og konverteringsfrekvenser 😲 Kom i gang her ⬇️Klikk for å Tweet

Oppsummering

Google Fonts er fantastiske og brukes av millioner av nettsteder. De gjør nettet mer behagelig, åpent, raskt og tilgjengelig gjennom solide typografi- og ikonografiprinsipper.

For å sikre en bedre helhetlig opplevelse for de besøkende, anbefaler vi at du følger beste skriftpraksis som å begrense skriftvekter, være vert for fonter lokalt (hvis nødvendig), og holde deg til retningslinjer for tilgjengelighet.

Nå over til deg - hva er dine favorittfonter og skriftpar fra Google Fonts? Gi oss beskjed nedenfor i kommentarene, og ikke glem å lese vår dybdeveiledning om WordPress-fonter!

Relaterte artikler

0 kommentarer
Inline tilbakemeldinger
Se alle kommentarer
Tilbake til toppen-knappen