Een typische webpagina bestaat over het algemeen uit verschillende elementen, waarvan de meeste in verschillende kleuren zijn gecodeerd en in verschillende lettertypen en stijlen zijn geschreven. Soms komen we webpagina's tegen die zo mooi zijn ontworpen dat we diep in hun attributen willen duiken; een heel elegant thema of een mooi, professioneel lettertype misschien.

Mensen die de weg weten met lettertypen en erdoor gefascineerd zijn, gebruiken vaak gratis online lettertype-identificatietools^{(free online font identifier tools)} om lettertypen op internet te ontdekken. Voor deze online tools moet u een URL invoeren^(URL) of een afbeelding uploaden met het weergegeven lettertype, dat vervolgens wordt gecontroleerd. Als je niet het gedoe van het leren gebruiken van een nieuwe tool wilt doorstaan, is dit bericht iets voor jou. Vandaag zullen we bespreken hoe gebruikers kunnen identificeren welk lettertype een bepaalde webpagina gebruikt zonder een browserextensie, een applicatie of online tools te gebruiken.

De procedure die we in dit artikel zullen bespreken, draait om een ​​instelling die de meeste webbrowsers bieden, namelijk ' Developer Tools ', of om precies te zijn, een optie genaamd Inspect Element . Hier zullen we bespreken hoe lettertypen kunnen worden geïdentificeerd in twee browsers: Chrome , Edge en Firefox .

Identificeer^(Identify) lettertypen op een webpagina met Inspect Element in Firefox

Ga naar de webpagina van het lettertype dat u wilt identificeren en klik met de rechtermuisknop op de tekst die is geschreven in het lettertype waarin u geïnteresseerd bent.

Klik in de lijst met opties die verschijnen (het contextmenu) op Inspect Element . Als u^(Doing) dit doet , worden de Developer Tools onder aan de pagina geopend.

In de rechterbenedenhoek van het gedeelte Ontwikkelhulpmiddelen^{(Development Tools)} vindt u een subkop met de naam Lettertypen^(Fonts) , klik erop.

Het zal dan voor u de eigenschappen weergeven van het lettertype waar u naar wilde kijken, zoals de grootte, regelhoogte, gewicht, enz., en ook of het lettertype al dan niet cursief is of niet, hoewel dat altijd duidelijk is.

Als u meer wilt weten over het gebruikte lettertype, heeft Firefox dat ook voor u. Als u naar beneden scrolt in het gedeelte met lettertypen en op 'Alle lettertypen op de pagina' klikt, wordt het tabblad lettertypen uitgevouwen en krijgt u alle lettertypen te zien die worden gebruikt op de webpagina die u op dit moment bekijkt, en ook waar ze zijn gebruikt. Niet alleen dat, maar u krijgt ook een voorbeeld van hoe een bepaald lettertype eruitziet. Als u met uw muis over de lettertypen in de Developer Tools beweegt, worden de gedeelten van de webpagina gemarkeerd die dat lettertype gebruiken.

Een lettertype identificeren met Developer Tools in Chrome

Het proces is vergelijkbaar met het hierboven beschreven proces. Volg de eerste twee stappen zoals u deed met Firefox om de Developer Tools aan de rechterkant van de pagina te openen.

Klik op de subkop 'Berekend'.

Scroll een beetje naar beneden en je vindt informatie over het lettertype waarin je geïnteresseerd bent (lettertypefamilie, grootte, enz.)

Helaas biedt Chrome u geen aanvullende informatie zoals Firefox dat wel doet.

Identificeer^(Identify) welk lettertype^(Font) wordt gebruikt met behulp van Edge Developer Tools

1. Rand openen
2. Klik met de rechtermuisknop en selecteer de tekst
3. Selecteer Inspecteren
4. Kijk in de Ontwikkelaarstools^{(Developer Tools)} die worden geopend onder Berekend^(Computed)
5. U ziet de details van het lettertype.

Als je denkt dat je niet kunt werken met browserontwikkelaarstools en dat online tools^{(Developer Tools)} beter bij je passen, zijn er verschillende die heel goed werken.

Lees het volgende^{(Read next)} : Vergelijkbare gratis alternatieven voor betaalde lettertypen vinden^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typicаl web page generally consists of several differеnt elements with most of them coded in different colorѕ and written in different fonts and styles. Sometimes, we cоme across web pages so beautifully designed that they make us want to delve deep into theіr attributes; a very elegаnt theme or a nice, professional font, perhapѕ.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• Een lettertype downloaden van een website met Developer Tools

• Sitegegevens wissen voor een bepaalde site in Chrome of Edge met Developer Tools

• Hoe het standaardlettertype in de Chrome-, Edge-, Firefox-browser te wijzigen

• Schakel Developer Tools in Edge uit met behulp van register- of groepsbeleid

• Fix Wazig bestand Open dialoogvenster in Google Chrome en Microsoft Edge

• Sluit alle geopende browsertabbladen tegelijk in Chrome, Edge of Firefox

• Lokale bestanden openen in Chrome, Firefox en Edge

• De startpagina wijzigen in Chrome, Firefox, Opera, Edge-browsers

• Links naar Nieuws en Interesses openen in Chrome of Firefox; niet Edge

• 400 slecht verzoek, cookie te groot - Chrome, Edge, Firefox

• Wis cookies, sitegegevens, cache voor specifieke website: Chrome Edge Firefox

• Geolocatie uitschakelen in Firefox, Chrome en Edge

• Hoe de gebruikersnaam en profielafbeelding te wijzigen in Edge, Chrome, Firefox

• Ouderlijk toezicht instellen in Chrome, Edge, Firefox, Opera

• Chrome, Edge, Firefox, Opera-browsers als Kladblok gebruiken

• Hoe Chrome, Edge, Firefox, Opera-browsers op Windows 11/10 te updaten

• Hoe webmeldingsverzoeken in Chrome, Firefox, Edge Browser te blokkeren

• Hoe de standaardbrowser te wijzigen: Chrome, Firefox, Edge op Windows 10

• Verwijder ALLE opgeslagen wachtwoorden tegelijk in Chrome, Firefox, Edge

• Deze site is niet beveiligd bericht in Edge, Chrome of Firefox