Font Inspector and <time> and <data> elements – Firefox Development Highlights

Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

Font Inspector

A Font Inspector is now available in the Firefox DevTools.


In the Firefox Inspector, a “Fonts” panel is now available. It exposes different information about the @font-faces used in the page:

  • Font name and font family
  • Its location (system vs. remote, and URL)
  • A preview (you can change it)
  • @font-face code

HTML5 and

We have implemented support for two new elements:

<time> element

The HTML time element (


The concert took place on .

More information can be found in the MDN documentation for the <time> element, and in the W3C specification.

<data> element

The data element represents its contents, along with a machine-readable form of those contents in the value attribute. The value attribute must be present and its value must be a representation of the element’s contents in a machine-readable format.

The <data> element adds a new attribute, value, which contains a string representation of the data. In script we can use the .value property to get the reflected value:


David Humphrey
document.getElementById("user").value; // "humphd"

It’s available in the WHATWG specification, and David Humphrey’s wrote more about it in HTML5 time and data elements in Firefox.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Chris Adams

    I work with a lot of multilingual content. One thing the font inspector could do which would be extremely useful is listing when font substitution occurred and which font was used – sometimes it’s non-trivial to answer the question of where a glyph came from, particularly if it’s on someone else’s computer

    March 13th, 2013 at 16:09

  2. Anthony Caudill

    Finally we have an alternative to invisible textareas.

    March 13th, 2013 at 17:07

  3. Aftab Khalid

    Really nice, there was a problem with fonts that how to check font performance and quality within the browsers and now we can inspect it and check the performance..

    March 13th, 2013 at 23:54

  4. Bastian

    Instead of making font inspector, you could work on making advanced network inspector, which could push FF native tools a way closer to firebug.

    March 15th, 2013 at 10:32

    1. Robert Nyman [Editor]

      Well, one thing doesn’t exclude the other. We want to do many things to the Developer Tools as good as possible.

      March 18th, 2013 at 02:51

Comments are closed for this article.