I skrivande stund finns det 884 olika Google Font-familjer tillgängliga gratis. Det är massor av valmöjligheter! Därför kanske du letar efter någon som hjälper dig att hitta den där nålen i höstacken med en lista över de bästa typsnitten från Google Fonts.

Vi har skapat den listan åt dig, och sedan delar vi också några bästa praxis för att använda Google Fonts på WordPress.

Att välja ett typsnitt är mer än bara ett estetiskt val – det kan ha en verklig effekt på webbplatsens avvisningsfrekvens och konverteringsfrekvenser, speciellt om du väljer ett typsnitt som är svårt för dina besökare att läsa.

Det lönar sig att ta sig lite tid att välja den bästa Google Fonts-familjen för din webbplats, istället för att bara välja det första typsnittet du ser!

De 10 bästa Google Fonts år 2019 – enligt allmänheten

Så hur kommer man fram med en lista över de bästa typsnitten från Google Fonts när så mycket av detta är subjektivt? Vi vill inte att hela listan ska vara subjektiv, så vi kommer att gå till insamlade data för att bygga en lista över de bästa typsnitten från Google Fonts.

Vi kommer i princip använda Google Fonts-analytics för att se vad många användare väljer och lita på att de valt det som fungerar. Med över 23 biljoner totalt antal typsnittsvisningar har Google lite data att utgå från. 😉

Sedan går vi lite utöver att bara titta på aktuell popularitet och väljer några av de nyare typsnitt som snabbt växer i popularitet. Redo? Låt oss dyka in…

1. Roboto

Roboto Google web font

Roboto Google font

Roboto är ett sans-serif-typsnitt från Christian Robertson som utvecklades av Google som systemtypsnitt för Android. Det är nu enormt populärt, kommer i 12 olika stilar, och gör flera framträdanden i Google Fonts analytics. Till exempel är Roboto det mest populära typsnittet. Men Roboto Condensed är också det sjätte mest populära typsnittet, och Roboto Slab dyker också upp som nummer 13!

2. Open Sans

Open Sans Google font

Open Sans Google font

Open Sans är ett sans-serif-typsnitt utvecklat av Steve Matteson. Google använder Open Sans på några av sina webbplatser, liksom i sina tryckta annonser och webbannonser.

3. Lato

Lato Google font

Lato Google font

Lato är ett annat populärt sans-serif-typsnitt, denna gång från Łukasz Dziedzic.

4. Slabo 27px/13px

Slabo Google font

Slabo Google font

Slabo är ett serif-typsnitt som utvecklats av John Hudson från Tiro Typeworks. Vad som är unikt med detta typsnitt är att det är speciellt utformat för att användas i en viss storlek – antingen 27px eller 13px beroende på dina behov.

5. Oswald

Oswald Google font

Oswald Google font

Oswald är ett sans-serif-typsnitt som ursprungligen utvecklades av Vernon Adams.

6. Source Sans Pro

Source Sans Pro Google font

Source Sans Pro Google font

Source Sans Pro är ett sans-serif-typsnitt från Paul Hunt som skapades för Adobe och var Adobes första open-source-typsnitt.

7. Montserrat

Montserrat Google font

Montserrat Google font

Montserrat är ett sans-serif-typsnitt från Julieta Ulanovsky, som fick namnet från stadsdelen Montserrat i Buenos Aires där hon bor. Med 18 olika stilar har du ganska många valmöjligheter.

8. Raleway

Raleway Google font

Raleway Google font

Med 18 olika stilar är Raleway en annan stor familj av sans-serif-typsnitt, ursprungligen skapad av Matt McInerney. Om du gillar Raleway och letar efter något unikt, erbjuder Raleway Dots liknande format men med ett prickat utseende som kan fungera för stora rubriker.

9. PT Sans

PT Sans Google font

PT Sans Google font

PT Sans utvecklades som de offentliga typsnitten för Ryska federationen och innehåller därför både latinska och kyrilliska tecken. Det finns också flera andra typsnitt i PT-familjen, inklusive några serif-alternativ.

10. Lora

Lora Google font

Lora Google font

Lora är ett populärt serif-typsnitt som är utformat för att fungera bra både på skärmen och i tryck.

Bonustypsnitt + Snabbväxande nykomlingar

Enligt statistiken är de tio typsnitten ovan de mest populära från Google Fonts. Men att bara visa de mest populära alternativen är att inte vara rättvis mot några snabbt växande och nya typsnitt som ännu inte har fått exponering nog att dyka upp på analytics.

Här är några av våra favoriter som inte dök upp i toppen av listan.

11. Noto Sans / Serif

Noto Sans Google font

Noto Sans Google font

Noto är ett Google-beställt typsnitt som kommer i både serif och sans-serif-versioner. Det får regelbundna uppdateringar, och det finns nu över 100 Noto typsnitt, och fler kommer hela tiden!

12. Nunito Sans

Nunito Sans Google font

Nunito Sans Google font

Nunito Sans is a sans-serif option that’s rapidly growing in popularity (its use has tripled since last year).

13. Concert One

Concert One Google font

Concert One Google font

Concert One är ett rundat typsnitt som är ett fantastiskt alternativ för rubriker.

14. Prompt

Prompt Google font

Prompt Google font

Prompt är ett sans-serif-typsnitt från Thailändska kommunikation och designföretaget Cadson Demak.

15. Work Sans

Work Sans Google font

Work Sans Google font

Work Sans är ett sans-serif-typsnitt som är optimerat för användning på skärmar. Designers rekommenderar att använda mellanvikt-stilar för allt från 14px-48px.

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

Så här skapar du de bästa Google Fonts-kombinationerna

Om du trodde att det var svårt att välja ett typsnitt från Google Fonts, vänta tills du försöker para ihop dem på din webbplats! Tack och lov är detta inte ett problem du måste lösa själv, om du inte vill. Det finns ett par sätt att hitta de bästa Google Fonts-kombinationerna.

Först kommer Google Fonts webbplats själv att föreslå populära parningar om du bläddrar ner på sidan:

Här hittar du Google Fonts-par

Här hittar du Google Fonts-par

Utöver det kan du också använda en webbplats som Font Pair för att få fler förslag.

Bästa praxis för att använda Google Fonts på WordPress

När du hittar de perfekta typsnitten från Google Fonts, är detta några bästa praxis för att använda Google Fonts på WordPress.

Begränsa antalet typsnittsvikter du använder

Några av dessa typsnitt – som Montserrat och Raleway – kommer med 18 olika typsnittsvikter. Även om det är bra att du har mycket att välja på, vill du inte ladda alla 18 vikter på din WordPress-webbplats eftersom det kommer att sakta ner dina laddningstider. Detta är mycket viktigt!

För de flesta typsnitt är det en bra tumregel att använda max 3 vikter:

En hel del WordPresswebbplatser vi ser nuförtiden hoppar även över kursiv och väljer bara 2 olika typsnittsvikter. Om du själv bäddar in Google Fonts kan du välja exakt vilka vikter som ska inkluderas på fliken Anpassa på Google Fonts:

Så väljer du Google Fonts-stilar

Så väljer du Google Fonts-stilar

De flesta WordPressteman idag inkluderar enkla sätt att välja vilka Google Fonts och vikter du vill använda. Men inte alla temautvecklare tänker på prestanda. Så i vissa fall kan det vara bättre att inaktivera Google Fonts i ditt tema och lägga till dem själv.

Variabla typsnitt börjar också bli populära och stöds av alla moderna webbläsare. Dessa är fantastiska eftersom det låter en typsnittfil att helt enkelt omvandla sig med olika egenskaper. Det finns dock inte många gratis typsnitt att välja mellan ännu. Google har dock några variabla typsnitt i Early Access.

Överväg att hosta Google Fonts Lokalt

Som ett alternativ till att leverera typsnitt från Googles server kan du också hosta typsnitt lokalt, vilket kan ge prestandafördelar. Men kom ihåg att de flesta Google Fonts förmodligen redan är cachade i människors webbläsare. Så vi rekommenderar att du gör dina egna prestandatester.

Om du använder ett annat premiumtypsnitt än Google fonts, som ”Brandon” – typsnittet vi använder på vår Kinsta-webbplats, är det bra att hosta dem lokalt (och leverera dem från ditt CDN).  För mer information om detta ämne, kolla in våra inlägg om hur du hostar typsnitt lokalt.

Välj ett typsnitt som kommer att få uppdateringar

Typsnitt är precis som WordPressplugins och teman – med tiden får de uppdateringar och förbättringar för att göra dem ännu bättre. Och medan riskerna är långt ifrån lika ödesdigra som med WordPressplugins, kan det fortfarande vara fördelaktigt att välja ett typsnitt som får regelbundna uppdateringar. Noto-familjen från Google är en som har fått regelbundna uppdateringar sedan 2014.

Eftersom de flesta typsnitt på den här listan är populära är det förmodligen rätt att anta att alla typsnitt på den här listan kommer att få regelbundna uppdateringar och förbättringar. Och om du bestämmer dig för att testa något som inte är med på listan, är att se till att det typsnitt du väljer är populärt nog att få uppmärksamhet, aldrig en dålig idé.

Glöm inte tillgänglighet

Enligt Världshälsoorganisationen, räknat år 2017, lever uppskattningsvis 253 miljoner människor med nedsatt syn: 36 miljoner är blinda och 217 miljoner har måttlig till svår nedsatt syn.

När du använder Google Fonts får du styra hur det ser ut med CSS, till exempel färg och storlek. Så glöm inte att följa Web Content Accessibility Guidelines (WCAG) 2.0. Detta säkerställer att ditt innehåll är lättillgängligt för alla.

Att följa dessa riktlinjer kommer göra att ditt innehåll är tillgängligt för ett bredare spektrum av personer med funktionshinder, inklusive blindhet och nedsatt syn, dövhet och hörselnedsättning, inlärningssvårigheter, kognitiva begränsningar, begränsad rörelse, talsvårigheter, ljuskänslighet och kombinationer av dessa.

En mycket viktig riktlinje är färgkontrasten. För en äldre design av Kinstas webbplats, använde vi ett typsnitt som var lite för ljust, och flera besökare påpekade att det gjorde det svårt att läsa. Det sista du vill göra är att publicera fantastiskt innehåll bara för att upptäcka att det är svårt för folk att läsa det!

Du kan använda ett verktyg som Color Contrast Checker från WebAIM för att se om dina typsnittfärger möter de officiella rekommendationerna. Nedan kan du se att färgerna på våra blogginlägg nu får godkänt i testet. 👍

Color contrast checker-verktyget

Color contrast checker-verktyget

Vilket är ditt favorit-typsnitt på Google Fonts?

Google Font är fantastiskt och används av miljontals webbplatser på webben varje dag. Att följa bästa praxis som att begränsa typsnittsvikter, hosta dem lokalt (i vissa fall) och följa riktlinjer för tillgänglighet, kommer att säkerställa en bättre övergripande upplevelse för dina besökare.

Nu över till er – vilka är era favorittypsnitt och typsnittpar från Google Fonts? Låt oss veta nedan i kommentarerna och glöm inte att läsa vår djupgående guide om WordPress-typsnitt!


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket