En typisk webbsida består i allmänhet av flera olika element med de flesta kodade i olika färger och skrivna i olika typsnitt och stilar. Ibland stöter vi på webbsidor så vackert designade att de får oss att vilja gräva djupt in i deras egenskaper; ett mycket elegant tema eller ett snyggt, professionellt typsnitt, kanske.

Människor som känner sig runt typsnitt och är fascinerade av dem använder ofta gratis verktyg för teckensnittsidentifiering online^{(free online font identifier tools)} för att upptäcka typsnitt på webben. Dessa onlineverktyg kräver att du anger en URL eller laddar upp en bild med teckensnittet som visas, som sedan inspekteras. Om du inte vill gå igenom besväret med att lära dig använda ett nytt verktyg, är det här inlägget för dig. Idag kommer vi att diskutera hur användare kan identifiera vilket typsnitt en viss webbsida använder utan att använda ett webbläsartillägg, en applikation eller några onlineverktyg.

Proceduren som vi kommer att diskutera i den här artikeln kommer att kretsa kring en inställning som de flesta webbläsare erbjuder, nämligen " Utvecklarverktyg^{(Developer Tools)} ", eller för att vara specifik, ett alternativ som kallas Inspektera element^{(Inspect Element)} . Här kommer vi att diskutera hur typsnitt kan identifieras i två webbläsare – Chrome , Edge och Firefox .

Identifiera^(Identify) teckensnitt på en webbsida med Inspect Element i Firefox

Besök webbsidan för det typsnitt du vill identifiera och högerklicka på texten som är skriven i det typsnitt du är intresserad av.

Från listan över alternativ som visas (kontextmenyn), klicka på Inspektera element^{(Inspect Element)} . Om du gör^(Doing) det öppnar du utvecklarverktygen^{(Developer Tools)} längst ned på sidan.

I det nedre högra hörnet av avsnittet Utvecklingsverktyg^{(Development Tools)} hittar du en underrubrik som heter Fonts , klicka på den.

Det kommer sedan att visa egenskaperna för teckensnittet du ville titta på, såsom storlek, linjehöjd, vikt, etc., och även om teckensnittet är kursivt eller inte, även om det alltid är uppenbart.

Om du är intresserad av att veta mer om typsnittet som används, har Firefox dig täckt med det också. Om du rullar ner i teckensnittssektionen och klickar på "Alla teckensnitt på sidan", kommer teckensnittsfliken att expandera och du kommer att se alla teckensnitt som används på webbsidan du surfar på för tillfället, och även var de används. Inte bara det, utan du får också en förhandstitt på hur ett visst typsnitt ser ut. Håll muspekaren över teckensnitten i utvecklarverktygen^{(Developer Tools)} för att markera de delar av webbsidan som använder det teckensnittet.

Identifiera ett teckensnitt med hjälp av utvecklarverktyg^{(Developer Tools)} i Chrome

Processen liknar den som beskrivs ovan. Följ de två första stegen som du gjorde med Firefox för att öppna utvecklarverktygen^{(Developer Tools)} till höger på sidan.

Klicka på underrubriken "Computed".

Scrolla^(Scroll) ner lite så hittar du information om typsnittet du är intresserad av (typsnittets familj, storlek etc.)

Tyvärr ger Chrome dig ingen ytterligare information som Firefox gör.

Identifiera^(Identify) vilket teckensnitt^(Font) som används med Edge Developer Tools

1. Öppna Edge
2. Högerklicka och välj texten
3. Välj Inspektera
4. I de utvecklarverktyg^{(Developer Tools)} som öppnas, titta under Beräknat^(Computed)
5. Du kommer att se teckensnittsdetaljerna.

Om du inte tror att du inte kan arbeta med webbläsarens utvecklarverktyg^{(Developer Tools)} och att onlineverktyg skulle passa dig bättre, finns det flera av dem som fungerar väldigt bra.

Läs nästa^{(Read next)} : Hur man hittar liknande gratisalternativ till betalda typsnitt^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consists of ѕеveral different elements with moѕt of them coded in different colors and written in different fonts and styles. Sometimes, we comе across wеb рages so beautifully designеd that they make us want tо delvе deep into their attributеs; a very elegant theme or a nice, professional font, perhaps.

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

• Hur man laddar ner ett teckensnitt från en webbplats med hjälp av utvecklarverktyg

• Rensa webbplatsdata för en viss webbplats i Chrome eller Edge med hjälp av utvecklarverktyg

• Hur man ändrar standardteckensnittet i webbläsaren Chrome, Edge, Firefox

• Inaktivera utvecklarverktyg i Edge med hjälp av register eller grupprincip

• Åtgärda dialogrutan för suddig filöppning i Google Chrome och Microsoft Edge

• 400 Bad Request, Cookie Too Large - Chrome, Edge, Firefox

• Rensa cookies, webbplatsdata, cache för specifik webbplats: Chrome Edge Firefox

• Hur man ändrar hemsida i Chrome, Firefox, Opera, Edge webbläsare

• Hur man får Flash att fungera i Chrome, Edge, Firefox NU

• Hur man öppnar lokala filer i Chrome, Firefox och Edge

• Share Button Plugins för webbläsare Chrome, Firefox och Edge

• Hur man stoppar automatiska omdirigeringar i webbläsare Chrome, Firefox, Edge

• Hur man ställer in föräldrakontroll i Chrome, Edge, Firefox, Opera

• Hur man inaktiverar geolokalisering i Firefox, Chrome och Edge

• Hur man inaktiverar den inbyggda lösenordshanteraren i Chrome, Edge, Firefox

• Hur man uppdaterar webbläsare Chrome, Edge, Firefox, Opera på Windows 11/10

• Så här ändrar du standardwebbläsare: Chrome, Firefox, Edge på Windows 10

• Inaktivera, aktivera cookies i webbläsarna Chrome, Edge, Firefox, Opera

• Lägg till Opera-liknande snabbval till Chrome, Edge eller Firefox

• Denna webbplats är inte säker meddelande i Edge, Chrome eller Firefox