Du scroller gjennom en feed med nettsider, og plutselig er den der. Den perfekte fonten du har lett etter i uker. Den spesielle svingen på den lille «a»-en og proporsjoner som får typografen i deg til å hvine av fryd. Men navnet? Nettstedets forfatter merket den ikke, å grave gjennom CSS-en tar tid, og designerens support er på ferie.

En font på skjermen er en CSS-egenskap, ikke et bilde. Nettleseren gir ærlig talt fra seg navn, vekt, størrelse og til og med fontleverandøren til alle som vet hvor de skal lete. De siste årene har fontidentifiseringsverktøy utviklet seg fra en DevTools-fane til utvidelser som viser lisenspriser, foreslår gratisalternativer og bokmerker funn i en samling.

I denne guiden får du fem metoder: fra umiddelbar (høyreklikk) til avansert (analyse av fontens binærfil). Ingen krever designgrad eller betalt abonnement.

💡 Rask oversikt:

• Fontanello: høyreklikk, så ligger fontnavnet allerede i kontekstmenyen (Chrome, Firefox, Edge, iOS)
• WhatFont: hold musepekeren over tekst, se fontfamilie, størrelse, farge og leveringstjeneste (Chrome, Safari)
• Fonts Ninja: identifiserer fonten, viser prisen, lagrer funn i bokmerker (Chrome)
• Innebygd inspektør: universell metode for alle nettlesere, ingen utvidelser
• What Can My Font Do?: last opp fontfilen, tjenesten dekoder selv en omdøpt font

Metodesammenligning: tabell

1. Fontanello, font i kontekstmenyen

Fontanello, en utvidelse som legger fontnavnet direkte i nettleserens kontekstmeny. Marker tekst, høyreklikk, velg Fontanello, så ser du ikke bare fontfamilien, men også vekt, størrelse, tegnavstand og farge. Ingen ekstra paneler, ikke nødvendig å aktivere verktøyet i verktøylinjen.

Utvidelsen fungerer i Chrome, Firefox, Edge og på iOS. Dette er den raskeste metoden av alle eksisterende: bokstavelig talt én handling. Du trenger ikke holde musepekeren noe sted, du trenger ikke bytte mellom DevTools-faner, høyreklikk og svaret ligger rett foran deg.

Fordeler:

• Én handling: høyreklikk og resultat i kontekstmenyen
• Støtter fire plattformer: Chrome, Firefox, Edge, iOS
• Viser tilleggsattributter: størrelse, farge, tegnavstand

Ulemper:

• Identifiserer ikke omdøpte fonter
• Lagrer ikke historikk over funnede fonter

Fontanello, valget for dem som setter pris på hastighet. Ett klikk, ingen aktivering, ingen ekstra bevegelser.

🔗 Fontanello i Chrome Web Store

2. WhatFont, hold musepekeren over og finn ut

WhatFont, en av de mest populære utvidelsene for fontidentifisering: tre millioner brukere og en vurdering på 4,0 i Chrome Web Store. Prinsippet er enkelt: klikk på WhatFont-ikonet i verktøylinjen, hold musepekeren over tekst, så dukker det opp et panel over siden med fullstendig informasjon om fonten.

I motsetning til Fontanello lar WhatFont deg markere flere tekstfragmenter samtidig og sammenligne fonter visuelt. Utvidelsen viser fontfamilie, vekt, størrelse, linjehøyde og farge. Et eget pluss er at den identifiserer fontleveringskilden: Google Fonts API, Adobe Fonts (tidligere Typekit) eller lokal @font-face.

Fordeler:

• Tre millioner brukere, stabil og utprøvd utvidelse
• Viser fontleveringstjeneste: Google Fonts, Adobe Fonts, lokal
• Fungerer i Chrome og Safari

Ulemper:

• Krever klikk på ikonet for aktivering, en ekstra handling sammenlignet med Fontanello
• Ingen versjon for Firefox

🔗 WhatFont i Chrome Web Store

3. Fonts Ninja, designerens sveitserkniv

Fonts Ninja gikk lenger enn enkel fontidentifisering. I tillegg til navnet og CSS-egenskapene viser utvidelsen: hvor mange stiler som er tilgjengelige for den funnede fonten, navnet på fontleverandøren, lisenspris og, noe som er spesielt verdifullt, en liste over lignende fonter.

Det innebygde bokmerkesystemet sparer designere for timevis. Fant en interessant font på en annens nettsted, lagret den i samlingen direkte fra utvidelsen og delte senere listen med teamet. Søk fungerer etter glyfeform, lisenstype og pris, praktisk når du trenger et budsjettalternativ til en dyr font.

Utvidelsen brukes av 900 tusen personer, vurdering 4,4. Fungerer foreløpig bare i Chrome. Størrelsesmessig er den tyngre enn WhatFont, 2 MB mot 741 KB, men funksjonaliteten rettferdiggjør det.

Fordeler:

• Viser fontpris, fontleverandør og lignende alternativer
• Innebygde bokmerker for funnede fonter
• Søk etter glyfeform og lisenstype

Ulemper:

• Bare Chrome, ingen versjoner for Safari og Firefox
• Tyngre enn alternativer: 2 MB mot 741 KB for WhatFont

🔗 Fonts Ninja i Chrome Web Store

4. Innebygd inspektør, universell metode uten utvidelser

Når du ikke vil installere utvidelser eller jobber i en nettleser der de ikke finnes, har alle moderne nettlesere et innebygd verktøy for fontidentifisering. Dette er tregere enn utvidelser, men krever ingen installasjon i det hele tatt.

Google Chrome. Høyreklikk på teksten og velg «Inspiser». DevTools-panelet åpnes. I Stiler-fanen finner du font-family-egenskapen, den viser alle fonter som er brukt på elementet. Den første i listen er den som vises akkurat nå.

Firefox. Firefox har en egen «Fonter»-fane i inspektøren. Høyreklikk → «Inspiser element» → gå til Fonter-fanen. Du ser ikke bare fontnavnet, men også vekten, størrelsen og til og med en glyfeforhåndsvisning, ingen utvidelse har dette.

Safari. Aktiver først «Utvikling»-menyen: Safari → Innstillinger → Avansert → kryss av for «Vis Utvikling-meny i menylinjen». Høyreklikk nå på tekst → «Inspiser element». I sidepanelet velger du «Stiler, Beregnet» og finner font-family-seksjonen.

Fordeler:

• Ingenting å installere, innebygd i alle nettlesere
• Firefox viser glyfeforhåndsvisning i Fonter-fanen
• Fungerer for ethvert element, ikke bare tekst

Ulemper:

• Tregere enn utvidelser: 10-30 sekunder mot umiddelbart resultat
• Upraktisk for massevisning av fonter på en side

5. What Can My Font Do?, dekoding av omdøpte fonter

En alvorlig hindring for alle utvidelser og inspektøren er en omdøpt font. Når en utvikler setter sammen en tilpasset pakke, mister font-family-navnet forbindelsen til originalen: i stedet for Inter eller Roboto ser du noe som custom-font-3742. Utvidelser er maktesløse, de leser CSS-egenskapen, ikke selve filen.

Løsningen er tjenesten What Can My Font Do?. Algoritmen:

• Gå via Chrome-inspektøren til fanen Applikasjon → Frames → Fonter. Finn fontfilen ved å matche filnavnet med det du ser i font-family.
• Åpne fontfilen i en ny fane, den vil lastes ned.
• Dra den nedlastede filen inn i What Can My Font Do?-vinduet. Tjenesten vil analysere de binære dataene og vise: det virkelige fontnavnet, fontleverandør, antall glyfer, språkstøtte, lisens og alle tegn i tabellform.

Dette er ikke en umiddelbar metode, den krever et minutt eller to og grunnleggende forståelse av DevTools. Men når utvidelser mislykkes mot en omdøpt eller tilpasset sammensatt font, er What Can My Font Do? den eneste fungerende metoden.

Fordeler:

• Identifiserer omdøpte fonter gjennom binær filanalyse
• Viser fullstendig informasjon: glyfer, språk, lisens
• Gratis nettjeneste, ingen installasjon nødvendig

Ulemper:

• Treg: ett til to minutter per font
• Krever forståelse av Applikasjon-fanen i DevTools

Video: hvordan identifisere en font på ett minutt

Se en steg-for-steg-veiledning av alle fem metodene i aksjon, fra utvidelser til inspektør:

⁉️🤔 Ofte stilte spørsmål

Er fontutvidelser trygge? Samler de ikke inn data?

WhatFont, Fontanello og Fonts Ninja samler ikke inn personopplysninger og overfører ikke informasjon om besøkte nettsteder. I Chrome Web Store-oppføringen for WhatFont oppgir utvikleren eksplisitt: utvidelsen samler ikke inn eller bruker brukerdata. Fonts Ninja ber om flere tillatelser, men dette er nødvendig for at fontbokmerkefunksjonen skal fungere.

Kan du finne ut en kommersiell font og lisensprisen?

Fonts Ninja er den eneste utvidelsen fra listen som viser lisensprisen direkte når du holder musepekeren over tekst. For kommersielle prosjekter sparer dette timevis: du trenger ikke søke etter fonten separat på MyFonts eller Adobe Fonts for å finne ut kostnaden.

Hva gjør man hvis fonten er identifisert, men ikke kan lastes ned?

Fonter på nettsteder er nesten alltid beskyttet av opphavsrett. Å finne ut navnet er lovlig. Å laste ned og bruke uten lisens er det ikke. Hvis fonten er kommersiell (for eksempel fra Linotype- eller Monotype-katalogen), kjøp en lisens på fontleverandørens nettsted. Gratisfonter ligger oftest på Google Fonts, de kan brukes fritt i ethvert prosjekt.

Hvorfor viser Firefox fonten, men ikke Chrome?

Dette skjer når en font er koblet til via @font-face med forskjellige formater: WOFF2 for Chrome, WOFF for eldre versjoner av Firefox. Hvis fonten ikke vises i Chrome, sjekk DevTools-konsollen på Konsoll-fanen: kanskje fontfilen er blokkert av CORS-policy eller ikke ble lastet på grunn av en annonseblokkerer.

Hvilken metode bør en frontendutvikler velge, og hvilken bør en designer velge?

For en frontendutvikler er den innebygde inspektøren mer praktisk, den er allerede åpen i arbeidsflyten, du trenger ikke bytte. For en designer er Fonts Ninja tingen: viser pris, alternativer og lar deg bokmerke funn for fremtidige prosjekter. For engangssjekker «hvilken font er dette?» bruk Fontanello, ett klikk og svaret ligger rett foran deg.

Hvilket fontidentifiseringsverktøy bør du velge?

Det beste valget avhenger av oppgaven. Hvis du er frontendutvikler og inspektøren allerede er åpen, bli i den, Fonter-fanen i Firefox vil gi mer informasjon enn noen utvidelse. Hvis du er designer på jakt etter referanser, installer Fonts Ninja for bokmerkene, prisene og lignende fonter. For raske sjekker er Fontanello hastighetskongen: høyreklikk og ferdig.

Og når ingen utvidelse kan håndtere det, omdøpt font, tilpasset bygg, hjemmesnekret pakke, last opp filen til fontanalysetjenesten What Can My Font Do?. Dette er den siste utveien som alltid fungerer.