How to detect which one of the defined font was used in a web page?

So here, we will be discussing some methods which will help you to get your desired font from any website ! 

1.WhatFont : Extensions such as WhatFont make it easy to detect the font on webpage. You just need to install it and click on the element you want to inspect. The result is shown in a floating box, in the context of your choice. It is available for Google Chrome , Safari , Firefox. 
How to download and activate:

  1. Go to this website https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm/related?hl=e2
  2. Add (download) Google chrome extension or Safari extension on your choice of web browser. 
  3. Go to webpage where you want to find out the font and click on WhatFont extension. 
  4. Hover over the webpage. You will find a floating box containing font ,you want to find out. 

Output:

2. Fontanello: Another useful tool is Fontanello. It will tell you which web font in your font-stack you are actually seeing – not what is supposed to be seen. It will also tell you the font size ,weight and style. It is as easy as adding a bookmark. Fontanello works on Safari, Chrome,Firefox. 
How to download and activate:



  1. Go to this website https://chrome.google.com/webstore/detail/fontanello/jdlhfjlpaijjhklfadlhbbmpjfddkglc?hl=en
  2. Add (download) Google chrome extension or Safari extension on your choice of web browser. 
  3. Go to webpage where you want to find out the font  right click on the text , find the fontanello in the menu . 

Output:

3. Inspect Element: As a developer you may be using inspect several times. Inspect can be also used to find out fonts used on the webpage. Using developer tools of your browsers is a good way to see which fonts are declared in CSS of the website. But using inspect is not a straight forward as using an extension. Inspect does not show you which font is actually being rendered though – it only shows the font stacks being applied. It also has advantages. It will surely increase your CSS skills as you will know how actually CSS is working in your website. 

Output:

Inspect

Note: It is good practice to wondered font used in beautiful websites . So keep it doing. There are many extensions available, you may use any of them. The above two are the best extensions. You may used to check fonts. 
 

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.