Lettertypen vinden met Chrome & Firefox DevTools

Browser DevTools laten je het exacte lettertype inspecteren dat op elk element wordt weergegeven. Zo gebruik je ze - en wanneer de URL-scanner de snellere keuze is.

Chrome DevTools - Gerenderde lettertypen

  1. 1Klik rechts op tekst en selecteer Inspecteren (of druk op Ctrl+Shift+I / Cmd+Option+I).
    Chrome rechtsklikmenu met Inspecteren blauw gemarkeerd
    Volledige schermafbeelding bekijken
    Rechtsklik op tekst, dan Inspecteren klikken
  2. 2Chrome opent het paneel Elementen met het aangeklikte element al gemarkeerd in de DOM-boom.
  3. 3Klik in het rechter paneel op het tabblad Berekend (tweede tabblad, naast Stijlen).
  4. 4Scroll voorbij de CSS-eigenschappen naar de sectie Gerenderde lettertypen.
    Chrome DevTools Berekend-tabblad met Gerenderde lettertypen: Inter Variable uit een woff2-bestand
    Volledige schermafbeelding bekijken
    Berekend-tabblad - scroll naar "Gerenderde lettertypen" om het actieve lettertype te zien
  5. 5Je ziet het exacte lettertype dat de browser gebruikte, het bronbestand dat werd geladen en hoeveel glyphs eruit zijn getekend.

Firefox DevTools - Tabblad Lettertypen

  1. 1Klik rechts op tekst en selecteer Inspecteren (of druk op F12). Het Inspecteur-paneel opent.
  2. 2Klik in het rechter paneel van de Inspecteur (waar je normaal Regels en Berekend ziet) op het tabblad Lettertypen.
  3. 3De linkerkolom toont alle lettertypen op de pagina. Klik op een naam voor het specimen, gewichtsbereik, formaat en bron-URL.
    Firefox DevTools Lettertypen-tabblad - Inter Variable geselecteerd met specimen en details
    Volledige schermafbeelding bekijken
    Firefox Lettertypen-tabblad - alle paginalettertypen links, details rechts

Beperkingen van de DevTools-aanpak

DevTools werkt goed voor het inspecteren van individuele elementen, maar geeft geen volledig overzicht van alle lettertypen die door een pagina zijn geladen. Plak de URL hieronder voor een volledig audit.

Sneller: de volledige pagina scannen via URL

Plak een URL en krijg de volledige lijst van alle gebruikte weblettertypen - elke @font-face-regel, Google Fonts-import en CDN-link - in één scan.

Veelgestelde vragen

Wat zijn "Gerenderde lettertypen" in Chrome?

Gerenderde lettertypen toont het werkelijke lettertype dat de browser gebruikte om de geselecteerde tekst te tekenen - na het toepassen van font-family fallbacks. Dit kan afwijken van de CSS font-family declaratie.

Waarom wijkt het gerenderde lettertype af van font-family in CSS?

font-family is een geprioritiseerde fallback-lijst. Als het eerste lettertype niet laadt, gaat de browser naar de volgende kandidaat. Gerenderde lettertypen toont wat er werkelijk werd gebruikt.

Kan ik alle lettertypen op een pagina vinden met DevTools?

Het Lettertypen-tabblad van Firefox toont alle geladen lettertypen. Chrome vereist element voor element inspecteren. Gebruik voor een volledig inventarisatie de URL-scanner hierboven.

Detecteert de URL-scanner ook Google Fonts?

Ja - alle lettertypebronnen worden gedetecteerd: Google Fonts, Bunny Fonts, Fontshare en zelf-gehoste @font-face lettertypen.

Terug naar lettertype-checker