Tipična web stranica općenito se sastoji od nekoliko različitih elemenata od kojih je većina kodirana u različitim bojama i napisana različitim fontovima i stilovima. Ponekad naiđemo na web stranice tako lijepo dizajnirane da nas natjeraju da poželimo duboko ući u njihove atribute; vrlo elegantna tema ili lijep, profesionalni font, možda.

Ljudi koji poznaju fontove i koji su fascinirani njima često koriste besplatne online alate za identifikaciju fontova^{(free online font identifier tools)} kako bi lakše otkrili fontove na webu. Ovi online alati zahtijevaju da unesete URL ili učitate sliku s prikazanim fontom, koji se zatim pregledava. U slučaju da ne želite prolaziti kroz muke učenja korištenja novog alata, ovaj je post za vas. Danas ćemo raspravljati o tome kako korisnici mogu identificirati koji font određena web stranica koristi bez upotrebe proširenja preglednika, aplikacije ili bilo kojeg online alata.

Procedura o kojoj ćemo raspravljati u ovom članku vrtjet će se oko postavke koju nudi većina web-preglednika, odnosno " Alati za razvojne programere^{(Developer Tools)} ", ili da budemo precizni, opcije pod nazivom Inspect Element . Ovdje ćemo raspravljati o tome kako se fontovi mogu prepoznati u dva preglednika – Chrome , Edge i Firefox .

Identificirajte^(Identify) fontove na web stranici pomoću Inspect Element u Firefoxu^(Firefox)

Posjetite web stranicu fonta koji želite identificirati i desnom tipkom miša kliknite tekst koji je napisan fontom koji vas zanima.

Na popisu opcija koje se prikazuju (kontekstualni izbornik) kliknite na Pregled elementa^{(Inspect Element)} . Time^(Doing) bi se otvorili alati za razvojne programere^{(Developer Tools)} na dnu stranice.

U donjem desnom kutu odjeljka Razvojni alati^{(Development Tools)} pronaći ćete podnaslov Fontovi^(Fonts) , kliknite na njega.

Zatim će vam prikazati svojstva fonta koji želite pogledati, kao što su njegova veličina, visina reda, težina itd., kao i je li font u kurzivu ili ne, iako je to uvijek očito.

Ako ste zainteresirani za više informacija o korištenom fontu, Firefox vam je također pomogao. Ako se pomaknete prema dolje kroz odjeljak fontova i kliknete na 'Svi fontovi na stranici', kartica fontova će se proširiti i bit će vam prikazani svi fontovi koji se koriste na web stranici koju trenutno pregledavate, kao i gdje se nalaze se koriste. Ne samo to, već također dobivate pregled kako određeni font izgleda. Prelazak miša preko fontova u Alatima za razvojne programere^{(Developer Tools)} će istaknuti odjeljke web stranice koji koriste taj font.

Identificirajte font pomoću alata za razvojne programere^{(Developer Tools)} u Chromeu^(Chrome)

Proces je sličan gore opisanom. Slijedite prva dva koraka kao što ste učinili s Firefoxom^(Firefox) da biste otvorili alate za razvojne programere^{(Developer Tools)} na desnoj strani stranice.

Kliknite podnaslov "Izračunato".

Pomaknite^(Scroll) se malo prema dolje i pronaći ćete informacije o fontu koji vas zanima (obitelj fonta, veličina itd.)

Nažalost, Chrome vam ne pruža nikakve dodatne informacije kao Firefox .

Odredite^(Identify) koji se font koristi pomoću alata Edge Developer Tools^{(Edge Developer Tools)}

1. Otvorite Edge
2. Desnom tipkom miša kliknite i odaberite tekst
3. Odaberite Inspect
4. U alatima za razvojne programere^{(Developer Tools)} koji se otvaraju, pogledajte pod Izračunato^(Computed)
5. Vidjet ćete detalje fonta.

Ako ne mislite da ne možete raditi s alatima za razvojne programere^{(Developer Tools)} preglednika i da bi vam online alati bolje odgovarali, postoji nekoliko njih koji rade vrlo dobro.

Pročitajte sljedeće^{(Read next)} : Kako pronaći slične besplatne alternative plaćenim fontovima^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web рagе generally consists of sеveral different elеments wіth most of them coded in different colors and written in dіfferent fonts and styles. Ѕometimes, we сome across web pages so beautifully designed that they make us want to dеlve deep intо their attributes; a very elegant theme or а 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

• Kako preuzeti font s web-mjesta pomoću alata za razvojne programere

• Izbrišite podatke web-lokacije za određenu web-lokaciju u Chromeu ili Edgeu pomoću alata za razvojne programere

• Kako promijeniti zadani font u pregledniku Chrome, Edge, Firefox

• Onemogućite alate za razvojne programere u Edgeu pomoću registra ili pravila grupe

• Popravi dijaloški okvir otvaranja zamućene datoteke u preglednicima Google Chrome i Microsoft Edge

• Kako ažurirati preglednike Chrome, Edge, Firefox, Opera na Windows 11/10

• Dopustite ili blokirajte skočne prozore na Chromeu, Firefoxu, Edgeu, Operi, Internet Exploreru

• 10 najboljih proširenja za Chrome, Edge i Firefox za spremanje stranice za kasnije čitanje

• Kako koristiti proširenje Avast na preglednicima Chrome, Firefox i Edge

• Onemogućite slike u Chromeu, Firefoxu, Edgeu, Internet Exploreru tijekom pregledavanja

• Besplatan preglednik web predmemorije za preglednike Chrome, Firefox i Edge

• Izbrišite kolačiće, podatke web-mjesta, predmemoriju za određenu web stranicu: Chrome Edge Firefox

• Uvijek prikaži gumb Preuzmi u Chromeu, Firefoxu i Edgeu

• Onemogućite, omogućite kolačiće u preglednicima Chrome, Edge, Firefox, Opera

• Što je Lazy Loading? Omogućite ili onemogućite u Chromeu, Firefoxu, Edgeu

• Blokirajte ili dopustite kolačiće treće strane u Chromeu, Firefoxu, Edgeu, Operi

• Ponovo pokrenite Chrome, Edge ili Firefox bez gubitka kartica u sustavu Windows 11/10

• Kako otvoriti preglednik Chrome, Edge ili Firefox u načinu cijelog zaslona

• Kako promijeniti početnu stranicu u preglednicima Chrome, Firefox, Opera, Edge

• Kako otvoriti veze za vijesti i interese u Chromeu ili Firefoxu; ne Edge