The new Font tools in Firefox 63 are awesome

A few days ago, I discovered a new addition to the Page Inspector in Firefox DevTools. It’s called Font tools.

The Fonts tab appears as the last tab of the CSS pane

The new tool makes it very easy to access information about the font style of the currently selected element as well as information regarding all fonts currently in use on the entire page.

  • Fonts used — description of the font for the currently selected element.
  • Fonts editor — the new section in Firefox 63, allowing direct changes to the font of the selected element.
  • All fonts on page — lists all fonts currently in use on the entire page

As it happens often, I spent time fine-tuning and tweaking the exact look and feel for a given piece of text which is exactly what the fonts editors helps me achive. I am really happy about this addition!

You can check out the full docs on the topic on MDN and of course by trying it the latest Firefox.