FontLens

Gratis extensie voor Chrome

Welk lettertype is dit? Klik met rechts en bekijk de CSS

Selecteer tekst op een website, klik met rechts en kies “Inspect font with FontLens”. De lettertype-inspecteur opent boven de pagina en toont familie, grootte, gewicht, regelhoogte en kleur, met kopieerbare CSS en een knop om het lettertype te downloaden.

Toevoegen aan Chrome — gratis

Werkt ook in Edge, Brave, Opera en andere Chromium-browsers.

De FontLens-inspecteur: voorbeeld Ag tussen hulplijnen voor kapitaalhoogte, x-hoogte en basislijn, met lettertype-eigenschappen en een Tailwind-fragment

In het kort

Wat het doet
Toont het lettertype van de geselecteerde tekst: familie, grootte, gewicht, regelhoogte, kleur en andere stijlen die afwijken van de standaard, met kopieerbare CSS.
Aan de slag
Selecteer tekst, klik met rechts en kies “Inspect font with FontLens”. De menuoptie verschijnt alleen als er tekst is geselecteerd.
Kopiëren als
CSS, SCSS, SASS of Tailwind, met de grootte in px, rem, pt of em.
Lettertypebestand
“Download font” haalt het weblettertype op via de @font-face-bron. Controleer de licentie voordat je het gebruikt.
Voor wie
Webdesigners, front-endontwikkelaars, toegankelijkheidsauditors en studenten die CSS leren.
Prijs
Gratis. Geen account en geen betaalde versie.
Gegevens
Draait in je browser. Geen servers en geen analytics. Het doet alleen een verzoek voor de download die je start.
Werkt in
Chrome en andere Chromium-browsers die via de Chrome Web Store installeren. Niet in Firefox of Safari.
Beperkingen
Leest de CSS van echte tekst op webpagina's. Geen tekst in afbeeldingen, canvassen of PDF's, en niet op Chrome-pagina's.
Versie
2.2.0, bijgewerkt 23 oktober 2026

In twee klikken naar het lettertype

  1. 1

    Selecteer tekst

    Een kop, alinea of knoplabel op een webpagina.

  2. 2

    Klik met rechts

    Kies “Inspect font with FontLens”. De inspecteur opent boven de pagina en toont familie, grootte, gewicht, regelhoogte en kleur.

  3. 3

    Kopiëren of aanpassen

    Kopieer CSS of Tailwind, probeer een andere grootte of kleur in het live voorbeeld, of download het lettertypebestand.

Waarom mensen de extensie openen

Aa

Ontdek de naam van het lettertype

Een kop gezien die je mooi vindt? Selecteer hem en bekijk de familie, het gewicht en de bron: Google Fonts, Adobe Fonts of de website zelf.

{ }

Vergelijk met een mock-up

Vergelijk de waarden op de live pagina met het ontwerpbestand en kopieer de regels als CSS, SCSS, SASS of Tailwind.

4.5:1

Controleer het contrast

Bekijk de contrastverhouding en de AA- en AAA-aanduidingen. Probeer vóór publicatie donkerdere tekst of een lichtere achtergrond.

Wat het doet

  • Voorbeeld met hulplijnen

    De eerste familie in de stack, getekend tussen hulplijnen voor kapitaalhoogte, x-hoogte en basislijn, gemeten aan het lettertype zelf.

  • snippetindelingen

    CSS, SCSS, SASS en Tailwind. Kopieer het hele fragment of één regel; je laatste indeling wordt onthouden.

  • Jouw eenheden

    Toon de grootte in px, rem, pt of em in de velden en het fragment. rem volgt de rootgrootte van de pagina.

  • Bron van het lettertype

    Een label toont waar het lettertype vandaan komt: Google Fonts, Adobe Fonts, self-hosted of een systeemlettertype op je computer.

  • Contrastcontrole

    De verhouding tussen tekst en achtergrond met AA- en AAA-aanduidingen voor normale en grote tekst. Die wordt bijgewerkt als je kleuren wijzigt.

  • Lettertype downloaden

    Haalt het bestand op via de @font-face-bron en geeft het de familienaam. Blokkeert de server de download, dan opent de bron in een nieuw tabblad.

Waarom duurt “welk lettertype is dit?” zo lang in DevTools

Een pagina geeft een lijst met lettertypen op en de browser gebruikt de eerste die beschikbaar is. Om te zien welke dat is, open je DevTools, zoek je het element, lees je het paneel Computed en speur je daarna in Network naar het lettertypebestand. Grootte, gewicht, regelhoogte en kleur staan op verschillende plekken.

FontLens leest de berekende stijl van de geselecteerde tekst en zet alles in één paneel: de familiestack, een voorbeeld van de eerste familie, de waarden, de bron en de CSS. Het leest de CSS van de pagina en kan daarom geen lettertype in een afbeelding herkennen.

Er verlaat niets je browser

  • Geen account of servers

    FontLens draait in je browser. Geen analytics en geen tracking.

  • Leest wat je selecteert

    De inspecteur leest de stijlen van de tekst waarop je rechtsklikt. Er wordt niets over de pagina verzonden.

  • Vier machtigingen

    Contextmenu voor de optie bij rechtsklikken; actief tabblad en paginatoegang om de inspecteur te openen; opslag voor voorbeeldtekst, eenheid en snippetindeling.

Chrome DevTools en FontLens

Chrome DevTools en FontLensChrome DevToolsFontLens
Het lettertype van tekst vindenInspecteren, element zoeken, Computed openenTekst selecteren, rechtsklikken, één menuoptie
Kopiëren als Tailwind of SCSSNee, waarden één voor één kopiërenTabblad CSS, SCSS, SASS of Tailwind
Waar het lettertype vandaan komtZoek het lettertypebestand in NetworkLabel: Google Fonts, Adobe Fonts, self-hosted of systeem
Het lettertypebestand downloadenZoek het in Network of Sources en sla het opEén knop
Contrast controlerenIn de kleurkiezer van StylesAA- en AAA-aanduidingen naast een live voorbeeld
PrijsIngebouwdGratis

Vragen

Hoe kom ik erachter welk lettertype een website gebruikt?

Voeg FontLens toe aan Chrome, selecteer tekst op de site, klik met rechts en kies “Inspect font with FontLens”. Je ziet de familie, grootte, gewicht, regelhoogte, kleur en bron van het lettertype.

Hoe kopieer ik de CSS van een lettertype van een website?

Kies in de inspecteur het tabblad CSS, SCSS, SASS of Tailwind en klik op “Copy all”, of kopieer één regel. Stel zo nodig eerst de eenheid in op px, rem, pt of em.

Kan ik een lettertype van een website downloaden?

Als de tekst een weblettertype gebruikt, haalt “Download font” het bestand op via de @font-face-bron. Een systeemlettertype heeft niets om te downloaden. Controleer de licentie voordat je het in je project gebruikt.

Kan FontLens een lettertype in een afbeelding of PDF herkennen?

Nee. Het leest de CSS van echte tekst op webpagina's en herkent dus geen lettertypen in afbeeldingen, canvassen of PDF's.

Hoe controleer ik tekstcontrast volgens WCAG?

Het voorbeeld toont de contrastverhouding tussen tekstkleur en achtergrond, met AA- en AAA-aanduidingen voor normale en grote tekst. Wijzig een kleur en de aanduidingen worden bijgewerkt.

Kan ik maten in rem zien in plaats van px?

Ja. Kies px, rem, pt of em en de velden en het fragment volgen die keuze. rem wordt berekend op basis van de rootlettergrootte van de pagina; je voorkeur blijft bewaard.

Is het gratis? Verzamelt het gegevens?

Het is gratis en vereist geen account. Er zijn geen servers of analytics; het enige verzoek is de download van het lettertype die je start.

Werkt het in Edge, Brave of Opera?

De meeste Chromium-browsers kunnen extensies uit de Chrome Web Store installeren, waaronder Edge, Brave, Opera en Vivaldi. Firefox en Safari worden niet ondersteund.

Meer gratis extensies van PYROCTAL

Welk lettertype is dit? Twee klikken.

Toevoegen aan Chrome — gratis