FontLens

Gratis utvidelse for Chrome

Hvilken font er dette? Høyreklikk og se CSS-en

Marker tekst på et nettsted, høyreklikk og velg Inspect font with FontLens. En fontinspektør åpnes over siden med familie, størrelse, tykkelse, linjehøyde og farge, CSS klar til å kopieres og en knapp for å laste ned fonten.

Legg til i Chrome — gratis

Fungerer også i Edge, Brave, Opera og andre Chromium-nettlesere.

FontLens-inspektøren: fontprøven Ag mellom hjelpelinjer for versalhøyde, x-høyde og grunnlinje, fontens egenskaper og et Tailwind-utdrag

Kort fortalt

Hva den gjør
Viser fonten i teksten du velger: familie, størrelse, tykkelse, linjehøyde, farge og andre stiler som skiller seg fra standarden, med CSS klar til å kopieres.
Slik kommer du i gang
Marker tekst, høyreklikk og velg Inspect font with FontLens. Menyvalget vises bare når tekst er markert.
Kopier som
CSS, SCSS, SASS eller Tailwind, med størrelsen i px, rem, pt eller em.
Fontfil
Download font henter webfonten fra @font-face-kilden. Sjekk fontlisensen før du bruker den.
Hvem den passer for
Webdesignere, frontend-utviklere, tilgjengelighetsrevisorer og studenter som lærer CSS.
Pris
Gratis. Ingen konto eller betalingsversjon.
Data
Kjører i nettleseren din. Ingen servere eller analyse. Den eneste forespørselen er nedlastingen av fonten du starter.
Fungerer i
Chrome og andre Chromium-nettlesere som installerer fra Chrome Web Store. Ikke Firefox eller Safari.
Begrensninger
Leser CSS-en til ekte tekst på nettsider. Ikke tekst i bilder, canvas eller PDF-er, og ikke Chromes egne sider.
Versjon
2.2.0, oppdatert 23. oktober 2026

To klikk til fonten

  1. 1

    Marker tekst

    En overskrift, et avsnitt eller en knappetekst på en hvilken som helst nettside.

  2. 2

    Høyreklikk

    Velg Inspect font with FontLens. Inspektøren åpnes over siden med familie, størrelse, tykkelse, linjehøyde og farge.

  3. 3

    Kopier eller juster

    Kopier CSS eller Tailwind, prøv en annen størrelse eller farge i forhåndsvisningen, eller last ned fontfilen.

Derfor åpner folk den

Aa

Finn skrifttypen

Så du en overskrift du liker? Marker den og se familien, tykkelsen og hvor fonten kommer fra: Google Fonts, Adobe Fonts eller selve nettstedet.

{ }

Sammenlign med en skisse

Sammenlign tallene på nettsiden med designfilen, og kopier reglene som CSS, SCSS, SASS eller Tailwind.

4.5:1

Sjekk kontrasten

Se kontrastforholdet med AA- og AAA-merker, og prøv mørkere tekst eller lysere bakgrunn før designet publiseres.

Dette gjør den

  • Fontprøve med hjelpelinjer

    Den første familien i stakken, tegnet mellom hjelpelinjer for versalhøyde, x-høyde og grunnlinje målt fra selve fonten.

  • utdragsformater

    CSS, SCSS, SASS og Tailwind. Kopier hele utdraget eller én linje; det siste formatet ditt huskes.

  • Enhetene dine

    Vis størrelsen i px, rem, pt eller em i feltene og utdraget. rem følger sidens egen rotstørrelse.

  • Fontkilde

    Et merke viser hvor fonten kommer fra: Google Fonts, Adobe Fonts, egen hosting eller en systemfont på datamaskinen din.

  • Kontrastsjekk

    Forholdet mellom tekst og bakgrunn med AA- og AAA-merker for normal og stor tekst. Oppdateres når du endrer fargene.

  • Download font

    Henter filen fra @font-face-kilden og gir den navn etter familien. Hvis serveren blokkerer nedlastingen, åpnes kilden i en ny fane.

Hvorfor tar «hvilken font er dette?» så lang tid i DevTools

En side oppgir en liste med fonter, og nettleseren bruker den første den har. For å finne ut hvilken må du åpne DevTools, finne elementet, lese Computed-panelet og lete etter fontfilen i Network-panelet. Størrelse, tykkelse, linjehøyde og farge ligger på ulike steder.

FontLens leser den beregnede stilen til teksten du valgte og samler alt i ett panel: fontstakken, en prøve av den første familien, verdiene, fontkilden og CSS-en. Den leser sidens CSS, så den kan ikke finne navnet på en font i et bilde.

Ingenting forlater nettleseren din

  • Ingen konto eller servere

    FontLens kjører i nettleseren din. Ingen analyse eller sporing.

  • Leser det du markerer

    Inspektøren leser stilene til teksten du høyreklikket på. Ingenting om siden sendes noe sted.

  • Fire tillatelser

    Kontekstmeny for høyreklikkvalget, aktiv fane og sidetilgang slik at inspektøren kan åpnes, samt lagring av eksempeltekst, enhet og utdragsformat.

Chrome DevTools eller FontLens

Chrome DevTools eller FontLensChrome DevToolsFontLens
Finne fonten i en tekstInspiser, finn elementet og åpne Computed-paneletMarker tekst, høyreklikk, velg ett menypunkt
Kopiere som Tailwind eller SCSSNei, kopier verdiene én etter énFane for CSS, SCSS, SASS eller Tailwind
Se hvor fonten kommer fraLet etter fontfilen i Network-paneletEt merke: Google Fonts, Adobe Fonts, egen hosting eller systemfont
Laste ned fontfilenFinn den i Network eller Sources og lagre denÉn knapp
Sjekke kontrastI fargevelgeren i Styles-paneletAA- og AAA-merker ved siden av en direkte forhåndsvisning
PrisInnebygdGratis

Spørsmål

Hvordan finner jeg ut hvilken font et nettsted bruker?

Legg FontLens til i Chrome, marker tekst på nettstedet, høyreklikk og velg Inspect font with FontLens. Du ser fontfamilien, størrelse, tykkelse, linjehøyde, farge og hvor fonten kommer fra.

Hvordan kopierer jeg CSS for en font fra et nettsted?

Velg CSS-, SCSS-, SASS- eller Tailwind-fanen i inspektøren, og trykk Copy all, eller kopier én linje. Bytt først enhet til px, rem, pt eller em hvis du trenger det.

Kan jeg laste ned en font fra et nettsted?

Når teksten bruker en webfont, henter Download font filen fra @font-face-kilden. En systemfont har ingen fil å laste ned. Sjekk fontlisensen før du bruker den i ditt eget prosjekt.

Kan FontLens finne en font i et bilde eller en PDF?

Nei. Den leser CSS-en til ekte tekst på nettsider, så den kan ikke finne fonter i bilder, canvas eller PDF-er.

Hvordan sjekker jeg tekstkontrast etter WCAG?

Forhåndsvisningen viser kontrastforholdet mellom tekstfargen og bakgrunnen, med AA- og AAA-merker for normal og stor tekst. Endre én av fargene for å oppdatere merkene.

Kan den vise størrelse i rem i stedet for px?

Ja. Bytt enhet til px, rem, pt eller em, så følger feltene og utdraget med. rem beregnes ut fra sidens rotstørrelse for fonten, og valget ditt huskes.

Er den gratis, og samler den inn data?

Den er gratis og krever ingen konto. Den har ingen servere eller analyse; den eneste forespørselen er fontnedlastingen du starter.

Fungerer den i Edge, Brave eller Opera?

De fleste Chromium-nettlesere kan installere utvidelser fra Chrome Web Store, inkludert Edge, Brave, Opera og Vivaldi. Firefox og Safari støttes ikke.

Flere gratis utvidelser fra PYROCTAL

Hvilken font er det? To klikk.

Legg til i Chrome — gratis