Google Fonts API: slik bruker du gratis webfonter

Google Fonts er et gratis bibliotek med over 1 900 skrifttyper som du kan legge inn på nettsiden din med et par linjer kode. I stedet for å laste opp fontfiler til egen server og skrive kompliserte CSS-regler, lar Google Fonts API nettleseren hente skriften direkte fra Googles tjenere – slik at alle besøkende ser nøyaktig samme font, uansett hvilken enhet eller hvilket operativsystem de bruker. Denne guiden forklarer hva tjenesten er, hvordan du bruker den steg for steg i 2026, hvilke muligheter og parametere du har, hva lisensene betyr, og hvordan du håndterer ytelse og personvern (inkludert den mye omtalte GDPR-dommen).

Hva er Google Fonts og Google Fonts API?

Google Fonts er en åpen samling av skrifttyper som Google tilbyr gratis, mens Google Fonts API er den tekniske tjenesten som leverer disse skriftene til nettsiden din. Når du bruker API-et, legger du en lenke i koden som peker på Googles tjener. Nettleseren laster da ned den riktige fontfilen og viser teksten med den valgte skriften – helt uten at du selv trenger å lagre fontfilene.

Tjenesten ble lansert i 2010 og het opprinnelig Google Web Fonts. Den gamle adressen www.google.com/webfonts sender deg i dag videre til fonts.google.com, som er den offisielle nettsiden der du blar gjennom og velger skrifter. Per 2026 inneholder biblioteket over 1 900 skriftfamilier, hvorav mer enn 500 er såkalte variable fonter (mer om dem lenger ned).

Poenget med tjenesten er enkelt: å gi alle som lager nettsider tilgang til profesjonell typografi uten lisenskostnader og uten teknisk styr. Ønsker du å forstå grunnlaget skriftene bygger på, har vi en egen artikkel om hva CSS er og hvordan stilsett styrer utseendet på en nettside.

Hvorfor trengte man FTP og egne fontfiler før?

Tidligere var utviklere nødt til å holde seg til «trygge» systemfonter fordi man ikke kunne stole på at besøkende hadde andre skrifter installert. Skrifter som Arial, Times New Roman, Georgia og Verdana følger med Windows og macOS, og derfor ble de standardvalget i CSS-kode.

Ville du bruke en annen skrift, måtte du først laste fontfilene opp til FTP-serveren din og deretter skrive egne @font-face-regler i CSS-en for å fortelle nettleseren hvor filene lå. Glemte du dette – eller brukte du bare fontnavnet uten å levere selve filen – risikerte du at besøkende som ikke hadde skriften installert, fikk opp en helt annen font. Resultatet var at nettsiden kunne se annerledes ut enn du hadde planlagt, med feil linjeavstand, bredde og helhetsinntrykk.

Google Fonts API løser dette ved at skriften alltid følger med fra Googles tjener. Du slipper å administrere fontfiler, og du er sikret at teksten ser lik ut hos alle. Det samme prinsippet gjelder når du vil hente ned skrifter til eget bruk – vi har samlet flere steder du finner gratis fonter til nedlasting.

Slik legger du til en Google-font steg for steg

Fremgangsmåten er endret siden de gamle «Quick-use»- og «Add to collection»-knappene forsvant. Slik gjør du det i dagens grensesnitt på fonts.google.com.

1. Finn og velg skriften

Gå til fonts.google.com og bruk søkefeltet eller filtrene (kategori, språk, tykkelse) til å finne en skrift. Klikk på navnet for å åpne fontens egen side, der du ser alle tilgjengelige vekter og stiler – for eksempel Regular 400, Medium 500 og Bold 700, samt kursiv.

2. Velg vektene du faktisk trenger

På fontsiden trykker du «Get font», og deretter «Get embed code». I innbyggingsvinduet huker du av for de vektene og stilene du vil bruke. Et viktig råd: velg kun det du trenger. Hver ekstra vekt og stil gjør at nettleseren må laste ned mer, noe som gjør siden tregere.

3. Kopier koden inn i HTML-en

Google gir deg en <link>-kode som du limer inn i <head>-delen av nettsiden. Den peker på det moderne css2-endepunktet og ser omtrent slik ut: <link href=»https://fonts.googleapis.com/css2?family=Roboto&display=swap» rel=»stylesheet»>. Denne linjen forteller nettleseren hvor den skal hente skriften.

4. Bruk fonten i CSS-en din

Til slutt tar du i bruk skriften med en vanlig CSS-regel, for eksempel: body { font-family: ‘Roboto’, sans-serif; }. Her er det lurt å alltid oppgi en reserveskrift (som sans-serif eller serif) etter fontnavnet, slik at teksten fortsatt vises pent hvis Google-fonten av en eller annen grunn ikke lastes. Vil du finjustere plasseringen av teksten etterpå, har vi en egen guide om hvordan du sentrerer skrift med HTML og CSS.

Foretrekker du en offisiell gjennomgang, finner du Googles egen veiledning på https://developers.google.com/webfonts/docs/getting_started. Den beskriver både selve API-et og de ulike parametrene du kan sende med.

@import som alternativ

I innbyggingsvinduet kan du bytte fra «link»-fanen til «@import»-fanen hvis du heller vil legge skriften rett inn i CSS-filen i stedet for i HTML-en. Da limer du inn en linje som starter med @import og peker på samme css2-adresse, øverst i stilsettet ditt. Metoden er praktisk når du ikke har tilgang til <head>, men den er som regel litt tregere enn <link>-varianten, fordi nettleseren må lese CSS-en først før den oppdager at en font skal hentes.

Hvilke parametere kan du styre i API-et?

Google Fonts API styres helt og holdent gjennom adressen (URL-en) du lenker til, og den kan ta flere parametere som gir deg kontroll over hva som lastes.

• family – navnet på skriften, med pluss-tegn (+) i stedet for mellomrom. Du kan hente flere familier i samme forespørsel.
• display – styrer hvordan teksten vises mens fonten lastes. Verdien display=swap er mest brukt: da viser nettleseren en reserveskrift umiddelbart og bytter til Google-fonten når den er klar, slik at teksten aldri blir usynlig.
• subset – lar deg be om tegnsett for andre språk, som kyrillisk eller gresk. Latinske tegn er alltid inkludert.
• text – begrenser nedlastingen til kun de bokstavene du faktisk bruker. Dette er nyttig for logoer eller overskrifter og kan ifølge Google redusere filstørrelsen med opptil 90 prosent.
• vekt og akser – for variable fonter kan du be om et helt spenn av tykkelser i én forespørsel i stedet for å laste hver vekt separat.

I tillegg finnes et eget utvikler-API (Web Fonts Developer API) som gir en maskinlesbar liste over alle tilgjengelige skrifter. Det krever en gratis API-nøkkel og brukes typisk av verktøy og tjenester som skal integrere fontvelgere, ikke av vanlige nettsider.

Variable fonter – én fil, mange muligheter

En variabel font er en enkelt fontfil som inneholder et helt spekter av varianter langs én eller flere «akser», for eksempel tykkelse, bredde eller skråstilling. I stedet for å laste separate filer for Light, Regular, Bold og Black, henter du én fil og justerer verdiene med CSS. Dette sparer ofte båndbredde og gir deg finere kontroll over typografien.

Per 2026 er mer enn 500 av skriftfamiliene i Google Fonts variable. For nettsider som bruker flere vekter av samme skrift, er dette gjerne både raskere og mer fleksibelt enn tradisjonelle statiske fonter. Variable fonter spiller også godt sammen med responsivt design, der tekststørrelser og -tykkelser kan tilpasses skjermbredden.

Er Google Fonts gratis å bruke kommersielt?

Ja – alle skriftene i Google Fonts er åpen kildekode og gratis å bruke, også på kommersielle nettsider og i trykksaker. De aller fleste er lisensiert under SIL Open Font License (OFL), mens enkelte eldre familier som Roboto og Open Sans bruker Apache License 2.0.

Den viktigste begrensningen i OFL er at du ikke kan selge selve fontfilene som et frittstående produkt. Du kan derimot fritt bruke skriften i design, laste den ned, pakke den med egne prosjekter og endre den, så lenge du følger lisensvilkårene (blant annet å beholde de originale lisensfilene ved videredistribusjon). For nesten alle vanlige bruksområder – nettsider, logoer, dokumenter og apper – kan du trygt regne Google Fonts som fri til bruk. Vil du kombinere skriftene med bilder, har vi også en oversikt over farge og størrelse på tekst med CSS og HTML.

Ytelse: slik laster skriftene raskt

Webfonter kan gjøre en side tregere hvis de brukes uforsiktig, så her er de viktigste grepene for å holde ytelsen oppe.

• Last bare det du bruker. Hver ekstra skrift, vekt og stil er en egen nedlasting. Hold deg til to–tre vekter per skrift der det er mulig.
• Bruk display=swap. Da slipper besøkende å stirre på usynlig tekst mens fonten lastes.
• Vurder preconnect. En liten kodelinje som forhåndskobler til fonts.googleapis.com og fonts.gstatic.com kan korte ned ventetiden før skriften hentes.
• Begrens antall skriftfamilier. To skrifter – én til overskrifter og én til brødtekst – holder for de fleste nettsider og gir et roligere uttrykk.

Disse prinsippene henger tett sammen med annen finpuss av designet. Vil du eksperimentere videre, har vi samlet nyttige CSS3-koder som gir designet litt edge.

Personvern og GDPR – det du bør vite

Når en besøkende laster en side som bruker Google Fonts fra Googles tjener, sendes vedkommendes IP-adresse til Google. En regional domstol i München (Landgericht München I) slo 20. januar 2022 fast at dette kan bryte med personvernforordningen (GDPR) når det skjer uten samtykke. I saken (saksnummer 3 O 17493/20) ble en nettstedeier dømt til å betale 100 euro i erstatning til en besøkende, fordi IP-adressen ble ansett som personopplysning.

Dommen er en førsteinstansavgjørelse og ikke bindende presedens utover den konkrete saken, men den har gjort mange nettstedeiere oppmerksomme på problemstillingen. Den vanlige løsningen er å «selvhoste» skriftene: du laster ned fontfilene fra Google Fonts og serverer dem fra din egen server med @font-face, slik at ingen data sendes til Google. Verktøy og pakker (for eksempel Fontsource) gjør dette enklere, og flere WordPress-temaer og -tillegg tilbyr nå lokal hosting av Google-fonter som et innebygd valg.

Google Fonts i WordPress

I WordPress kan du bruke Google Fonts på flere måter. Mange moderne temaer har en innebygd fontvelger i tilpasseren eller i blokkredigeringens stilinnstillinger, der du velger skrift uten å skrive kode. Alternativt kan du legge <link>-koden inn via temaets innstillinger for egendefinert kode, eller bruke et tillegg som håndterer både valg og eventuell lokal hosting av hensyn til personvern.

Skal du jobbe mye med typografi og utseende i WordPress, kan det være verdt å se på WordPress-design for norske bloggere, der vi går gjennom temaer og tilpasningsmuligheter.

Alternativer til Google Fonts

Google Fonts er mest brukt, men ikke det eneste valget. Noen foretrekker alternativer av hensyn til personvern, andre vil ha et bredere utvalg av betalte, profesjonelle skrifter. Tabellen under sammenligner de vanligste løsningene.

For mange er den beste løsningen å selvhoste Google-fontene man liker – da får man både det store gratisutvalget og unngår at data sendes til tredjepart. Trenger du derimot et stort utvalg av lisensierte, kommersielle skrifter fra kjente skriftstøperier, er en betaltjeneste som Adobe Fonts ofte et bedre valg.

Vanlige feil folk gjør

Selv om Google Fonts er enkelt, er det noen fallgruver som går igjen.

• For mange skrifter og vekter. Å laste inn fem skrifter med alle vekter gjør siden treg og uttrykket rotete. Begrens deg.
• Glemmer reserveskrift. Uten en fallback (f.eks. sans-serif) bak fontnavnet i CSS-en kan teksten se feil ut hvis skriften ikke lastes.
• Dropper display=swap. Da risikerer du at teksten er usynlig i de første sekundene mens fonten lastes – dårlig for både brukere og søkemotorer.
• Overser personvern. Mange glemmer at IP-adressen sendes til Google. Hvis du har europeiske besøkende, bør du vurdere selvhosting eller samtykke.
• Bruker fontnavnet uten å laste det inn. Skriver du bare font-family uten tilhørende <link>- eller @import-linje, vises en standardskrift i stedet.

Friskrivning

Denne artikkelen er ment som generell informasjon om Google Fonts og den tekniske tjenesten, og er ikke juridisk rådgivning. Reglene rundt GDPR, IP-adresser og samtykke tolkes ulikt, og rettsavgjørelsen som omtales er en regional førsteinstansdom. Er du i tvil om hva som gjelder for ditt nettsted, bør du gjøre din egen vurdering eller kontakte en jurist. Sjekk alltid den offisielle informasjonen hos Google Fonts og hos Datatilsynet for oppdaterte retningslinjer.

Vanlige spørsmål (FAQ)

Er Google Fonts helt gratis?

Ja. Alle skriftene er åpen kildekode og gratis å bruke, både privat og kommersielt. De fleste er lisensiert under SIL Open Font License, og den eneste reelle begrensningen er at du ikke kan selge selve fontfilene som et eget produkt.

Hvordan legger jeg til en Google-font på nettsiden min?

Velg en skrift på fonts.google.com, trykk «Get font» og deretter «Get embed code», og kopier <link>-linjen inn i <head>-delen av siden. Deretter tar du skriften i bruk med en CSS-regel som font-family: ‘Fontnavn’, sans-serif.

Bryter Google Fonts med GDPR?

Det kan det gjøre hvis skriftene lastes fra Googles tjener uten samtykke, fordi IP-adressen sendes til Google. En domstol i München dømte i 2022 en nettstedeier til å betale erstatning for dette. Du unngår problemet ved å selvhoste fontfilene på din egen server.

Hva betyr display=swap?

Det er en parameter som bestemmer hvordan teksten vises mens fonten lastes. Med display=swap vises en reserveskrift umiddelbart, og nettleseren bytter til Google-fonten så snart den er klar – slik at teksten aldri er usynlig.

Hva er forskjellen på @import og link-metoden?

Begge henter samme skrift. <link>-koden legges i HTML-ens <head> og er som regel raskest, mens @import legges øverst i CSS-filen og er praktisk når du ikke har tilgang til HTML-en. @import kan være litt tregere fordi nettleseren må lese CSS-en først.