DEV Community

machy44
machy44

Posted on

3

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.

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.

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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay