FontLens

Gratis tillägg för Chrome

Vilket typsnitt är det? Högerklicka och se CSS

Markera text på valfri webbplats, högerklicka och välj ”Inspect font with FontLens”. En typsnittsinspektör öppnas ovanpå sidan med familj, storlek, vikt, radhöjd och färg, CSS som är klart att kopiera och en knapp för att hämta typsnittet.

Lägg till i Chrome — gratis

Fungerar även i Edge, Brave, Opera och andra Chromium-webbläsare.

FontLens inspektör: provet Ag mellan versalhöjd, x-höjd och baslinje, typsnittsegenskaper och ett Tailwind-utdrag

Snabbfakta

Vad den gör
Visar typsnittet för den markerade texten: familj, storlek, vikt, radhöjd, färg och andra stilar som avviker från standarden. CSS är klart att kopiera.
Kom igång
Markera text, högerklicka och välj ”Inspect font with FontLens”. Menyalternativet visas bara när text är markerad.
Kopiera som
CSS, SCSS, SASS eller Tailwind, med storleken i px, rem, pt eller em.
Typsnittsfil
”Download font” hämtar webbtypsnittet från dess @font-face-källa. Kontrollera licensen innan du använder typsnittet.
För vem
Webbdesigners, frontendutvecklare, tillgänglighetsgranskare och studenter som lär sig CSS.
Pris
Gratis. Inget konto och ingen betalversion.
Data
Körs i din webbläsare. Inga servrar eller analyser. Den enda förfrågan är hämtningen av typsnittet som du startar.
Fungerar i
Chrome och andra Chromium-webbläsare som kan installera från Chrome Web Store. Inte Firefox eller Safari.
Begränsningar
Läser CSS för riktig text på webbsidor. Inte text i bilder, canvas eller PDF-filer, och inte Chromes egna sidor.
Version
2.2.0, uppdaterad 23 oktober 2026

Två klick till typsnittet

  1. 1

    Markera text

    En rubrik, ett stycke eller en knapptext på valfri webbsida.

  2. 2

    Högerklicka

    Välj ”Inspect font with FontLens”. Inspektören öppnas ovanpå sidan med familj, storlek, vikt, radhöjd och färg.

  3. 3

    Kopiera eller justera

    Kopiera CSS eller Tailwind, prova en annan storlek eller färg i förhandsvisningen eller hämta typsnittsfilen.

Därför öppnar folk det

Aa

Ta reda på typsnittet

Såg du en rubrik du gillar? Markera den och se familj, vikt och var typsnittet kommer från: Google Fonts, Adobe Fonts eller själva webbplatsen.

{ }

Matcha en mockup

Jämför värdena på den aktiva sidan med designfilen och kopiera sedan reglerna som CSS, SCSS, SASS eller Tailwind.

4.5:1

Kontrollera kontrasten

Se kontrastförhållandet med AA- och AAA-markeringar. Prova mörkare text eller ljusare bakgrund innan designen publiceras.

Vad den gör

  • Prov med måttlinjer

    Den första familjen i listan visas mellan versalhöjd, x-höjd och baslinje, uppmätta från själva typsnittet.

  • utdragsformat

    CSS, SCSS, SASS och Tailwind. Kopiera hela utdraget eller en rad; det senaste formatet sparas.

  • Dina enheter

    Visa storleken i px, rem, pt eller em i fälten och utdraget. rem följer sidans egen rotstorlek.

  • Typsnittskälla

    En etikett visar källan: Google Fonts, Adobe Fonts, webbhotell eller ett systemtypsnitt på datorn.

  • Kontrastkontroll

    Förhållandet mellan text och bakgrund med AA- och AAA-markeringar för normal och stor text. Markeringarna uppdateras när du ändrar färger.

  • Hämta typsnitt

    Filen hämtas från @font-face-källan och får familjens namn. Om servern blockerar hämtningen öppnas källan i en ny flik.

Varför tar ”vilket typsnitt är det?” så lång tid i DevTools

En sida anger en lista med typsnitt och webbläsaren använder det första som finns. För att ta reda på vilket öppnar du DevTools, hittar elementet, läser Computed-panelen och letar sedan efter typsnittsfilen i Network-panelen. Storlek, vikt, radhöjd och färg finns på olika ställen.

FontLens läser den beräknade stilen för texten du markerade och samlar allt i en panel: typsnittslistan, ett prov av den första familjen, värdena, källan och CSS. Den läser sidans CSS och kan därför inte identifiera typsnitt i en bild.

Inget lämnar din webbläsare

  • Inget konto eller server

    FontLens körs i din webbläsare. Ingen analys eller spårning.

  • Läser det du markerar

    Inspektören läser stilarna för texten du högerklickade på. Ingen information om sidan skickas någonstans.

  • Fyra behörigheter

    Kontextmeny för högerklicksalternativet, aktiv flik och sidåtkomst så att inspektören kan öppnas, samt lagring för exempeltext, enhet och utdragsformat.

Chrome DevTools jämfört med FontLens

Chrome DevTools jämfört med FontLensChrome DevToolsFontLens
Hitta typsnittet i en textInspektera, hitta elementet och öppna Computed-panelenMarkera text, högerklicka och välj ett menyalternativ
Kopiera som Tailwind eller SCSSNej, kopiera värdena ett i tagetFlik för CSS, SCSS, SASS eller Tailwind
Var typsnittet kommer frånLeta efter typsnittsfilen i Network-panelenEtikett: Google Fonts, Adobe Fonts, webbhotell eller systemet
Hämta typsnittsfilenHitta den i Network eller Sources och sparaEn knapp
KontrastkontrollI färgväljaren i Styles-panelenAA- och AAA-markeringar intill en direktförhandsvisning
PrisInbyggtGratis

Frågor

Hur tar jag reda på vilket typsnitt en webbplats använder?

Lägg till FontLens i Chrome, markera text på webbplatsen, högerklicka och välj ”Inspect font with FontLens”. Du ser familj, storlek, vikt, radhöjd, färg och var typsnittet kommer från.

Hur kopierar jag CSS för ett typsnitt från en webbplats?

Välj fliken CSS, SCSS, SASS eller Tailwind i inspektören och tryck på ”Copy all”, eller kopiera en rad. Byt enhet till px, rem, pt eller em först om du vill.

Kan jag hämta ett typsnitt från en webbplats?

När texten använder ett webbtypsnitt hämtar ”Download font” filen från dess @font-face-källa. Ett systemtypsnitt har ingen fil att hämta. Kontrollera licensen innan du använder typsnittet i ditt projekt.

Kan FontLens identifiera typsnitt i en bild eller PDF?

Nej. Det läser CSS för riktig text på webbsidor och kan inte namnge typsnitt i bilder, canvas eller PDF-filer.

Hur kontrollerar jag textkontrast enligt WCAG?

Förhandsvisningen visar kontrastförhållandet mellan textfärg och bakgrund med AA- och AAA-markeringar för normal och stor text. Ändra någon färg så uppdateras markeringarna.

Kan den visa storlekar i rem i stället för px?

Ja. Byt enhet till px, rem, pt eller em, så följer fälten och utdraget med. rem beräknas från sidans rotstorlek för typsnitt, och ditt val sparas.

Är den gratis? Samlar den in data?

Den är gratis och kräver inget konto. Inga servrar eller analyser; den enda förfrågan är hämtningen av typsnittet som du startar.

Fungerar den i Edge, Brave eller Opera?

De flesta Chromium-webbläsare kan installera tillägg från Chrome Web Store, bland annat Edge, Brave, Opera och Vivaldi. Firefox och Safari stöds inte.

Fler gratistillägg från PYROCTAL

Vilket typsnitt är det? Två klick.

Lägg till i Chrome — gratis