En skrifttype er ikke bare «pene bokstaver». Den styrer oppmerksomheten, setter stemningen og påvirker lesbarheten direkte. En dårlig skrifttype skyver besøkende bort fra et nettsted i løpet av sekunder, selv om innholdet er utmerket.

Noen ganger besøker du et nettsted og legger merke til at teksten ser kostbar og stilig ut. Du ønsker å finne ut hvilken skrifttype som brukes, til ditt eget prosjekt eller rett og slett av profesjonell nysgjerrighet. Men nettstedseiere merker ikke typografien sin, og noen omdøper skrifttyper i CSS med vilje for å gjøre identifisering vanskeligere.

Gode nyheter: det er mulig å identifisere en skrifttype fra ethvert nettsted. Du trenger ikke være frontend-utvikler eller designer; tre tilnærminger dekker praktisk talt alle scenarioer. Fra nettleserens innebygde inspektør til utvidelser med ett klikk og tjenester for skrifttyper i bilder.

💡 Rask oversikt:

• Åpne DevTools (F12) og finn font-family i Computed-fanen

• Installer Whatfont eller Fontanello og hold markøren over tekst

• Last opp et skjermbilde til Font Squirrel Matcherator eller WhatTheFont

1. Innebygd nettleserinspektør

Den mest tilgjengelige metoden som ikke krever noen installasjon overhodet. Alle moderne nettlesere (Chrome, Firefox, Edge, Safari) inneholder utviklerverktøy (DevTools). Blant dem finnes en inspektør som viser CSS-egenskaper for ethvert element på siden, inkludert skrifttypen.

Slik åpner du den. På Windows trykker du Ctrl + Shift + I; på Mac Cmd + Shift + I. Eller høyreklikk på teksten og velg «Inspiser» / «Vis kode». DevTools-panelet åpnes.

På venstre side av panelet ser du HTML-strukturen; på høyre side CSS-reglene. Men den raskeste veien til skrifttypen går via Computed-fanen. Bla gjennom listen over egenskaper til font-family; dette er skrifttypenavnet. Ved siden av viser nettleseren den spesifikke skriftfilen som rendres på siden.

Det finnes også en alternativ rute for dem som vil se alle nettstedets skrifttyper på én gang. I Chrome DevTools åpner du Application-fanen → Frames-delen → Fonts-mappen. Nettleseren viser en liste over alle innlastede skriftfiler med URL og format (woff2, ttf). Det er tregere, men avslører hva som er skjult i @font-face.

Fordeler: gratis, krever ingen utvidelser, viser nøyaktig skrifttypenavn og stil (vekt, stil, størrelse). Ulemper: krever flere klikk; metoden fungerer ikke på mobile enheter.

2. Nettleserutvidelser

Hvis du ofte sjekker skrifttyper, vil en utvidelse spare deg for timevis. Prinsippet er enkelt: du holder markøren over tekst, og utvidelsen viser skrifttypenavnet og CSS-parametrene i et verktøytips.

2.1 Whatfont

Den mest populære løsningen i denne nisjen. Anbefalt av Wired, Lifehacker og SwissMiss. Installasjon fra Chrome Web Store tar ett klikk.

Etter installasjon klikker du på utvidelsesikonet øverst til høyre i nettleseren for å aktivere gjenkjenningsmodus. Når du nå holder markøren over en tekst, viser Whatfont skrifttypen rett over pekeren. Ved å klikke på teksten vises hele kortet: familie, vekt, størrelse, linjehøyde og farge.

Utvidelsen fungerer også på Firefox og Safari (via en port). Gratis, ingen registrering nødvendig, åpen kildekode på GitHub.

🔗 Whatfont i Chrome Web Store

2.2 Fontanello

Mens Whatfont viser informasjon når du holder musepekeren over, fungerer Fontanello via høyreklikk. Marker tekst på et nettsted, trykk på høyre museknapp og velg Fontanello fra kontekstmenyen. Et panel vises med fullstendig informasjon: skriftnavn, vekt, størrelse, farge og til og med tekstens kontrastforhold mot bakgrunnen (et kriterium for universell utforming).

Fontanello er tilgjengelig for Chrome og Firefox. En ekstra fordel: utvidelsen belaster ikke siden med konstant sporing; den aktiveres kun når du ber om det.

🔗 Fontanello i Chrome Nettmarked

2.3 Fonts Ninja

Et kraftigere verktøy med en «font-DNA»-funksjon: en proprietær algoritme som analyserer skriftfiler for mer nøyaktige resultater. I tillegg til å identifisere fonter ved hover, kan Fonts Ninja bokmerke fonter du finner og vise et sammendrag av alle skrifttyper som brukes på en side.

Det er et forbehold: bokmerker og enkelte funksjoner krever registrering. Men grunnleggende fontidentifikasjon fungerer uten konto. Utvidelsen er betalt (med en prøveperiode), så den er verdt å vurdere hvis du jobber profesjonelt med typografi.

🔗 Fonts Ninja i Chrome Nettmarked

3. Slik identifiserer du en font fra et bilde

Inspektøren og utvidelsene er maktesløse når fonten er en del av et bilde: en logo, banner eller meme. Tekst i et bilde er ikke et HTML-element, noe som betyr at det ikke har noen CSS-egenskaper. Det finnes spesialiserte tjenester for slike tilfeller.

3.1 Font Squirrel Matcherator

Et gratis verktøy fra Font Squirrel, utprøvd over mange år. Slik fungerer det:

• Last opp et skjermbilde eller tekstutdrag til Matcherator-grensesnittet
• Velg området som inneholder bokstavene (blå markør i verktøylinjen)
• Klikk på «Matcherate It!»

Tjenesten analyserer tegnformene og returnerer en liste over de nærmeste treffene fra databasen sin. Hvis det ikke finnes et eksakt treff, foreslår den visuelt like alternativer med en likhetsprosent. Den fungerer til og med med håndskrevne fonter, så lenge bokstavene ikke berører hverandre.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont fra MyFonts

WhatTheFont bruker dyp læring og en database med mer enn 233 000 fonter. Last opp et bilde, klikk på den ønskede bokstaven, så finner algoritmen treff. Den største fordelen sammenlignet med Matcherator: WhatTheFont håndterer sammenhengende skrift der bokstavene flyter inn i hverandre. Dette er en solid teknisk egenskap som eldre tjenester mangler.

For best resultat, last opp horisontal tekst med god oppløsning på en kontrasterende bakgrunn.

🔗 WhatTheFont på MyFonts

Video: identifisere en font på ett minutt

En kort demonstrasjon av hvordan du installerer Identify Font-utvidelsen og finner en font på et hvilket som helst nettsted uten å åpne DevTools:

⁉️🤔 Ofte stilte spørsmål

Kan du identifisere en font på et mobilnettsted?

Ja, men med begrensninger. Utvidelser er ikke tilgjengelige i mobilnettlesere, og DevTools er det heller ikke. Fremgangsmåten som fungerer: ta et skjermbilde av teksten på telefonen og last det opp til WhatTheFont eller Font Squirrel Matcherator via en datamaskin. Hvis teksten på nettstedet er stor og tydelig, vil tjenesten gjenkjenne skrifttypen fra skjermbildet like godt som fra et skrivebordsbilde.

Hva hvis nettstedseieren endret fontnavnet i CSS?

Noen utviklere endrer font-family i stilsett til et vilkårlig navn, selv om de faktisk laster inn en bestemt fontfil. I dette tilfellet vil DevTools-metoden via Application-fanen (Frames → Fonts) vise de faktiske fontfil-URL-ene. Fra filnavnet (for eksempel Inter-Regular.woff2) kan du enkelt identifisere skrifttypen. Utvidelser som Fonts Ninja med «DNA-analyse» omgår også navneendring ved å analysere selve filen i stedet for CSS-egenskapen.

Hvilken metode er mest nøyaktig?

For tekst på en side: utvidelsen Whatfont eller Fontanello; ett svep med musen, og du har det nøyaktige navnet. For bilder: WhatTheFont med sin nevrale nettverksmotor er mer nøyaktig enn Matcherator for sammenhengende og dekorative fonter. For full sikkerhet ved endret CSS: DevTools → Application → Fonts, der du ser den faktiske fontfil-URL-en; feil er umulig her.

Må du betale for å identifisere fonter?

Nei. Alle metodene nevnt i denne artikkelen er gratis. DevTools er innebygd i nettleseren. Whatfont og Fontanello er gratis utvidelser med åpen kildekode. Font Squirrel Matcherator er en gratis nettjeneste. WhatTheFont er gratis (finansiert gjennom fontsalg, ikke identifikasjon). Fonts Ninja har en betalt versjon, men grunnleggende fontidentifikasjon fungerer uten betaling.

Kan du automatisk bruke en oppdaget font på ditt eget nettsted?

Teknisk sett ja, men juridisk avhenger det av fontens lisens. Du kan fritt identifisere skrifttypen. Du kan imidlertid bare bruke den på ditt eget nettsted hvis fonten har en åpen lisens (SIL Open Font License, Apache 2.0) eller du har kjøpt en kommersiell lisens. Google Fonts, Font Squirrel og Adobe Fonts er trygge kilder med klare bruksvilkår.

Hvilken fontidentifikasjonsmetode du bør velge

Hvis du nærmer deg dette spørsmålet for første gang, start med DevTools. Det er gratis, tar 30 sekunder og krever ingen installasjon. For regelmessig arbeid med typografi, installer Whatfont: ett svep med musen i stedet for fire klikk.

Når en font er skjult i et bilde, last opp et skjermbilde til WhatTheFont. Det er den mest teknologisk avanserte gratis bildebaserte søketjenesten. Og hvis skrifttypen er omdøpt i CSS, finn filen via Application → Fonts i DevTools: denne ruten avslører sannheten uansett hvilke utviklertriks som er brukt.

Husk: å finne en font er ikke vanskelig. Den vanskeligere delen er å bruke den riktig. Sjekk lisensen, test lesbarhet på ekte innhold, og ikke bland mer enn to skrifttyper i ett enkelt prosjekt. God typografi roper ikke; den fungerer.