"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Check used fonts on a webpage

Check used fonts on a webpage

Published on 2024-08-01
Browse:726

Circumstances

As I am currently learning next.j. I am going through the course created by next team (https://nextjs.org/learn).

There is a section related to fonts and images optimization.
Honestly, I have never paid much attention to fonts and which fonts are used on a certain element on a webpage.
But I realized going through this material that you are able to do that. You can find out which fonts are used on a certain element. You could have more than one custom fonts on the page and this could be useful.

As I am using Chrome as my default browser I opened devtools and checked the used fonts.

chrome dev tools

This seemed pretty poor and without much info.

But I did the same thing in firefox and firefox seems to have much more options regarding fonts. You could change the size, line height, spacing, weight through it's editor. This seems quite useful especially while you are trying to find out which font properties suit you best for a certain element.

Check used fonts on a webpage

My thoughts

These findings regarding fonts reminded me when I had some troubles with the layout in the past that I could do much better debugging in firefox than in chrome.
Firefox seems is taking more care about css stuff to make FE development more fluid than chrome does. I think I should take this in consideration next time while I am doing css work and use firefox as a default one!

Cheers. Have a good day!

Release Statement This article is reproduced at: https://dev.to/machy44/check-used-fonts-on-a-webpage-29cn?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3