Det finns 1052 olika kostnadsfria Google Fonts-familjer (vid skrivandet av den här artikeln). Det är många val! Det kan med andra ord vara bra att få lite guidning i form av en lista över de bästa.
Vi har gjort en sådan lista, och kommer sedan även att dela några av de bästa metoderna för att använda Google Fonts i WordPress.
Att välja ett teckensnitt är mer än bara ett estetiskt val – det kan ha en betydande effekt på din webbplats avvisningsfrekvenser och konverteringsfrekvenser, särskilt om du väljer ett teckensnitt som är svårt att läsa. Det lönar sig därför att lägga lite tid på att välja den perfekta Google Fonts-familjen för din webbplats, istället för att använda det första teckensnittet som du stöter på.
Om du behöver ännu fler teckensnitt, kan du titta på vårt inlägg om 50+ moderna teckensnitt att använda på din WordPress-webbplats.
Kolla in vår videoguide om de bästa Google Fonts
Varför ska man använda Google Fonts?
Det finns tusentals teckensnittsarkiv på internet, så vad är det som gör Google Fonts så speciellt?
För det första är det kostnadsfritt! Det underhålls och levereras dessutom av Google, vilket innebär att de garanterat är säkra. Det finns naturligtvis gott om skumma webbplatser där du kan ladda ner kostnadsfria teckensnitt, men vem vet vad som följer med dessa filer?
Kvaliteten på teckensnitten på sådana webbplatser kan även ifrågasättas.
Google har skapat ett urval av över tusen högkvalitativa teckensnitt. Om du inte är en grafisk designer med ett perfekt öga för typografi är det ett säkrare val.
För det andra så finns det inga invecklade licensbegränsningar. Alla teckensnitt i Google Fonts-katalogen har öppen källkod och är kostnadsfria att använda i kommersiella projekt. Du kan ladda ner eller bädda in dem på din webbplats, och du kan till och med använda dem i utskriftsprojekt.
Även om det inte finns någon enhetlig licens använder de flesta teckensnitt i databasen Open Font-licensen.
Andra ”kostnadsfria teckensnitt” är sällan kostnadsfria och inkluderar en stor mängd förvirrande licensbegränsningar som kan bli jobbiga om du gör ett misstag. Detta gäller inte för Google Fonts.
Och slutligen är det enkelt att lägga till Google Fonts på din webbplats med hjälp av Google Fonts API. Du kan alternativt ladda ner dem individuellt och ladda upp dem till din webbserver via FTP / SFTP.
Även om Google Fonts tenderar att vara enkla och kanske inte lika häftiga som vissa betalda teckensnitt, slår det verkligen webbsäkra teckensnitt som är förinstallerade i stora operativsystem, samma teckensnitt som alla har sett tusentals gånger tidigare.
Vad du ska leta efter i ett Google Font
Om det är en sak som du bör lära dig när du utformar en webbplats är det hur du väljer ett Google Font som passar ditt projekt. Bra typografi kommer att gynna eller missgynna din webbplats.
Det kan verka som en oviktig detalj, men det kan vara skillnaden mellan att någon lämnar din webbplats tidigt eller stannar kvar för att bli en lojal läsare eller kund.
Att välja rätt teckensnitt är något som grafiska designers spenderar år på att behärska. Med några principer i åtanke kan du dock välja ett vackert teckensnitt för din webbplats.
- Anpassning för ditt varumärke: Detta kan vara den mest kritiska aspekten. De bästa webbplatserna har ett teckensnitt som visar upp deras personlighet samtidigt som de är läsbara och passar in i den nuvarande designen. Apple och Iron Maiden nyttjar exempelvis väldigt olika teckensnitt, men de passar i båda fallen fint för varumärket.
- Läsbarhet: Den näst viktigaste principen är läsbarhet. En galet eller flummigt teckensnitt kan säkert passa ditt varumärke, men om dina besökare inte kan läsa det, kommer de lämna sidan snabbt. Dina teckensnitt måste därför vara professionella och läsbara.
- Teckensnittsklassificering: Även om det finns hundratals sätt att klassificera ett teckensnitt är dessa de fem huvudtyperna: serif, sans-serif, script, monospace och decorative. Ett script eller serif-teckensnitt förmedlar elegans, medan teckensnitt med monospace är populära för tekniska webbplatser. Att känna till dessa klassificeringar ger dig en bättre utgångspunkt i din sökning.
- Display eller body Font: Display-teckensnitt är för stora storlekar, rubriker eller utskriftsprojekt. De har råd att vara mindre läsbara för den unika designens skull. Body Font’s primära direktiv är läsbarhet, eftersom de utgör huvuddelen av din webbplats.
- Stämning och avsikt: Precis som med alla konstnärliga verk designar konstnärer teckensnitt för specifika stämningar och miljöer. De flesta teckensnitt inkluderar anteckningar om hur de har utformats och hur du kan använda dem. Använd dessa anteckningar för att bestämma om teckensnittet passar för ditt projekt.
De 10 bästa Google Fonts år 2024 (enligt folkmassornas visdom)
Så hur skapar man en lista över bäst Google Fonts när så mycket av detta är subjektivt? Vi vill inte att hela listan ska vara partisk, så vi kommer att nyttja data för att skapa en lista över de mest populära Google Fonts.
Vi använder Google Fonts analytics för att få svaren. Med över 50 biljoner totala teckensnittsvisningar har Google väldigt mycket data att analysera.
Vi går sedan utöver de råa popularitetssiffrorna och väljer några kommande HTML-teckensnitt som blir mer och mer populära.
Redo? Vi kör igång!
1. Roboto
Roboto är den långvariga ledaren och Kinsta’s valda teckensnitt. Det är ett sans-serif-alternativ från Christian Robertson som Google utvecklade som systemteckensnitt för Android. Det har fått en stor popularitet, finns i 12 olika stilar och gör flera framträdanden i Google Fonts analytics.
Roboto är det mest populära teckensnittet. Men Roboto Condensed är det sjätte mest populära teckensnittet, och Roboto Slab hamnar på plats 12!
2. Open Sans
Open Sans Condensed är ett väldigt läsbart teckensnitt hos Google som är inspirerat av föregångaren Droid Sans. Google använder Open Sans på några av sina webbplatser och sina utskrifts- och webbannonser. Open Sans Condensed, dess systerteckensnitt, är det trettonde mest populära teckensnittet hos Google Fonts.
3. Lato
Lato är ett annat populärt val från Łukasz Dziedzic. Det har en hel del historia bakom sin design, balanserar motstridiga mål, vilket resulterar i ett unikt och lättviktigt sans-serif-teckensnitt.
4. Montserrat
Montserrat är ett sans-serif teckensnitt från Julieta Ulanovsky, som bor i Montserrat-området i Buenos Aires. Med 18 olika stilar som sträcker sig från lätt till tung, har du en hel del alternativ.
5. Oswald
Oswald är ett sans-serif teckensnitt som är utvecklat av Vernon Adams. Det designades med den distinkta alternativa gotiska stilen i åtanke, vilket framgår av dess djärva form.
6. Source Sans Pro
Source Sans Pro är ett sans-serif teckensnitt som skapades för Adobe och är Adobe’s första teckensnitt med öppen källkod. Det är skapat av Paul Hunt och är rent och läsbart.
7. Slabo 27px/13px
Slabo är ett serif-teckensnitt som är utvecklat av John Hudson från Tiro Typeworks. Det här teckensnittet är särskilt utformat för vissa storlekar – antingen 27px eller 13px, beroende på dina behov.
8. Raleway
Med sina 18 olika stilar är Raleway ett annat stort sans serif-teckensnitt, ursprungligen skapat av Matt McInerney. Om du gillar Raleway och letar efter något unikt erbjuder Raleway Dots en liknande styling med ett prickat tillvägagångssätt som kan fungera för stora rubriker.
9. PT Sans
PT Sans utvecklades för de offentliga typerna av Ryska federationen och innehåller därför både latinska och kyrilliska tecken. Det finns även andra teckensnitt i PT-familjen, inklusive några serif-alternativ.
10. Merriweather
Merriweather’s namn väcker idén om en trevlig design, och det är exakt vad dess designers avsåg. Även om merriweather Sans inte är lika populärt är det ett systerprojekt som passar exceptionellt bra ihop med detta teckensnitt.
Bonusteckensnitt + Teckensnitt på frammarch
Enligt siffrorna är de tio teckensnitten ovan de mest populära Google Fonts. Men de mest populära alternativen är inte hela sanningen. Det finns många teckensnitt på frammarch som helt enkelt inte har fått den rätta exponeringen.
Här är några av våra favoriter som inte dök upp i toppen av analytics.
11. Noto Sans / Serif
Noto är ett Google-beställt teckensnitt som både finns i serif- och sans serif-versioner. Det får regelbundna uppdateringar, och det finns över 100 Noto-teckensnitt. Fler är på gång!
Notos mål är att täcka alla alfabet och tecken från olika språk medan dess distinkta design passar ihop med över hundratals olika teckensnittsfamiljer. Dessa derivat inkluderar de populära Noto Sans KR och Noto Sans JP.
12. Nunito Sans
Nunito Sans är ett sans serif-alternativ med en snabbt växande popularitet. Dess användning tredubblades mellan 2018 och 2019, och det blir mer och mer populärt för varje år.
13. Concert One
Concert One är ett rundat groteskt teckensnitt som är ett fantastiskt alternativ när det gäller rubriker. Dess okonventionella design kommer säkert att locka till sig blickar.
14. Prompt
Prompt är ett sans-serif erbjudande från den thailändska kommunikationsdesignfirman Cadson Demak. Den är loopless (den thailändska motsvarigheten till sans-serif) och innehåller både thailändska och latinska tecken.
15. Work Sans
Work Sans är ett sans-serif teckensnitt som är optimerat för användning på skärmar. Formgivarna rekommenderar att du använder mellanviktsstilarna för allt från 14px-48px.
Så här skapar du de bästa kombinationerna av Google Fonts
Om du tyckte att det var svårt att försöka välja ett teckensnitt från Google Fonts, vänta tills du försöker para ihop dem på din webbplats! Detta är tack och lov inte ett problem du måste lösa (om du inte vill). Det finns några enkla vägar till de bästa Google Fonts-kombinationerna.
Google Fonts-webbplatsen föreslår faktiskt själv populära kombinationer om du scrollar ner på sidan:
Utöver detta kan du även använda en webbplats som Font Pair för att få fler förslag.
Metodtips för att använda Google Fonts i WordPress
När du har hittat de perfekta teckensnitten för ditt projekt, kommer här några av de bästa metoderna för att använda Google Fonts i WordPress.
Begränsa antalet teckensnittsvikter
Några av dessa teckensnitt , som Montserrat och Raleway – har 18 olika teckensnittsvikter. Även om det är bra med många alternativ, bör du inte ladda alla 18 vikterna på din WordPress-webbplats eftersom det kommer att sakta ner dina laddningstider.
Att följa denna riktlinje är mycket viktigt!
För de flesta teckensnitt är en bra tumregel att maximalt använda tre vikter:
- Vanlig
- Kursiv
- Fet
Många WordPress-webbplatser skippar till och med kursivt och kör på endast två olika teckensnittsvikter.
Om du bäddar in Google Fonts själv kan du välja exakt vilka vikter som ska inkluderas. Besök först en teckensnittssida och klicka sedan på Välj det här formatet bredvid det som du vill använda.
De flesta av dagens WordPress-teman innehåller enkla sätt att välja vilka Google-teckensnitt och vikter som du vill använda. Men alla temautvecklare är inte fokuserade 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 teckensnitt börjar också bli populära och stöds av alla moderna webbläsare. Dessa är fantastiska eftersom de tillåter en teckensnittsfil att omvandlas med olika egenskaper. Google Fonts har många variabla teckensnitt att välja mellan, och du kan till och med begränsa din sökning till att bara gälla dem.
Överväg att hosta Google Fonts lokalt
Som ett alternativ till att visa teckensnitt från Google’s server kan du även hosta teckensnitt lokalt, vilket ger prestandafördelar. Kom dock ihåg att de flesta Google-teckensnitt förmodligen redan är cachelagrade i människors webbläsare. Så vi rekommenderar att du gör dina prestandatester.
Om du använder ett annat premiumteckensnitt än Google Fonts, som ”Brandon”-font som vi använder på vår Kinsta-webbplats, är lokal hosting (och att betjäna dem från ditt CDN) den bästa vägen. För mer om detta ämne, kolla in våra inlägg om hur du hostar teckensnitt lokalt.
Välj ett teckensnitt som får uppdateringar
Teckensnitt fungerar precis som WordPress-plugins och teman – med tiden får de uppdateringar och förbättringar för att bli ännu bättre. Och även om insatserna inte är lika komplicerade som med WordPress-plugins, kan det fortfarande vara fördelaktigt att välja ett teckensnitt som får regelbundna uppdateringar. Noto-familjen från Google har exempelvis fått regelbundna uppdateringar sedan 2014.
Eftersom de flesta teckensnitt på den här listan är populära kommer de förmodligen att få regelbundna uppdateringar och förbättringar. Och om du bestämmer dig för att gå utanför listan är det bra att se till att det teckensnitt som du väljer är populärt nog för att få uppmärksamhet.
Glöm inte tillgänglighet
Enligt Världshälsoorganisationens data som samlades in 2015 lever uppskattningsvis 253 miljoner människor med synnedsättning: 36 miljoner är blinda och 217 miljoner har måttlig till allvarlig synnedsättning. Antalet personer med någon form av funktionsnedsättning har dessutom ökat till 2,2 miljarder år 2024.
När du använder Google Fonts kan du styra hur de ser ut med CSS, till exempel färg och storlek. Så glöm inte att följa WCAG (Web Content Accessibility Guidelines) 2.0. Detta säkerställer att ditt innehåll är lättillgängligt för alla.
Genom att följa dessa riktlinjer kommer ditt innehåll att bli tillgängligt för ett bredare spektrum av personer med funktionsnedsättning, 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. – Riktlinjer för webbinnehållstillgänglighet (WCAG) 2.0
En kritisk riktlinje är färgkontrasten. Vårt teckensnitt var lite för lätt på en äldre design av Kinsta-webbplatsen, och besökare uttryckte oro eftersom det gjorde det svårt att läsa. Det sista du vill göra är att publicera fantastiskt innehåll, som blir en påfrestning för människors ögon!
Du kan använda ett verktyg som Color Contrast Checker från WebAIM för att se om dina teckensnittsfärger klarar de officiella rekommendationerna. Du kan till exempel se att färgerna på våra blogginlägg har klarat detta test. 👍
Så här lägger du till Google Fonts i WordPress
Om du har hittat ett teckensnitt eller två är det sista steget att lägga till dem på din webbplats. Tack vare Google Fonts är denna uppgift ännu enklare än vanligt.
Anta att du vill få ett teckensnitt till din webbplats. Du har i så fall tre alternativ: installera ett plugin som Easy Google Fonts eller Google Fonts Typography, använda Google Fonts API för att ladda upp teckensnittet till din webbplats eller ladda ner det manuellt och hosta det på din webbplats.
Om du behöver veta hur du ändrar dina teckensnitt i WordPress har vi skrivit en detaljerad guide som hjälper dig.
Sammanfattning
Google Fonts är fantastiskt och används av miljontals webbplatser. De gör webben trevligare, öppnare, snabbare och mer tillgänglig tack vare solida typografi- och ikonografi-principer.
För att säkerställa en bättre övergripande upplevelse för dina besökare rekommenderar vi att du följer bästa teckensnittspraxis som att begränsa teckensnittsvikter, hosta teckensnitt lokalt (om det behövs) och hålla dig till tillgänglighetsriktlinjerna.
Nu över till dig – vilka är dina favoritteckensnitt och teckensnittskombinationer från Google Fonts? Låt oss veta kommentarerna, och glöm inte att läsa vår djupgående guide om WordPress-teckensnitt!
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar