• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Firefox Developer Tools
  1. MDN
  2. Firefox Developer Tools
  3. Page Inspector
  4. How to
  5. View fonts

View fonts

In This Article
  1. font-family tooltip
  2. Fonts view

font-family tooltip

If you hover over a font-family property in the Rules view, you will get a tooltip with a sample of that font:

Fonts view

In Firefox 47 only, the Fonts view is disabled by default. If you want to see the Fonts view in Firefox 47, visit about:config, find the preference devtools.fontinspector.enabled, and set it to true.

Before and after Firefox 47, the Fonts view is enabled by default.

The Fonts view shows all the fonts in use by the selected element. Note that it shows the font used on your system, which may be different from the fonts specified in the CSS:

The text in the font view is "Abc" by default, and starting from Firefox 41 the preview text can be freely edited.

Document Tags and Contributors

Tags: 
  • Guide
  • Inspector
  • Tools
 Contributors to this page: wbamberg, Sebastianz, sjakthol, Aleksej, kscarfone, ariessa
 Last updated by: wbamberg, Jul 11, 2016, 11:27:08 AM
  1. Core Tools
    1. Page Inspector
    2. Web Console
    3. JavaScript Debugger
    4. Network Monitor
    5. Performance
    6. Responsive Design Mode
    7. Tips
  2. More Tools
    1. Memory
    2. Storage Inspector
    3. DOM Property Viewer
    4. Developer Toolbar
    5. Eyedropper
    6. Screenshot
    7. Scratchpad
    8. Style Editor
    9. Shader Editor
    10. Web Audio Editor
  3. Connecting the devtools
    1. about:debugging
    2. Connecting to Firefox for Android
    3. Connecting to iframes
    4. Connecting to other browsers
  4. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  5. Extending the devtools
    1. Adding a panel to the toolbox
    2. Example devtools add-ons
    3. Remote Debugging Protocol
    4. Stream Transport
    5. Source Editor
    6. The Debugger Interface
    7. Web Console custom output
  6. Settings
  7. Release notes