Check used fonts on a webpage

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.

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.

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!

The above is the detailed content of Check used fonts on a webpage. For more information, please follow other related articles on the PHP Chinese website!