How to Determine What Font a Browser Is Actually Using to Render Some Text

How can I determine what font a browser is actually using to render some text?

Per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

This answer original referenced the "Font Finder" plugin, but only because it was from 4 years ago. The fact that old answers linger like this and the community cannot update them is one of the few remaining failures of Stack Overflow.

How to know which font is used by browser from CSS font-family list?

In firefox-developer-tools, Inspector > Fonts tab displays "Fonts used" by the currently inspected element. Edit fonts MDN

In google-chrome-devtools, Elements > Computed tab displays "rendered fonts"
for the currently inspected element. "Even if its name isn’t in the font-family list." whats-that-font , Hackernoon

Firefox :-

Chrome :-

Thanks, @xuemind for suggested edit

How to detect which one of the defined font was used in a web page?

I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present. This won't work for monospaced fonts.

Here's where it came from:
Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

What font is displayed?

Basically, an element is set to use a specific font . If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present.

Here's where I saw it: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Also, The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

How do I determine which html elements are using a font?

Getting all elements grouped by computed font-family style

If you're interested in an extremely rudimentary solution, try this:

var fonts = {};

document.querySelectorAll('*').forEach(function(element) {
    var fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');

    fonts[fontFamily] = fonts[fontFamily] || [];

    fonts[fontFamily].push(element);
});

console.log(fonts);

It'll group the page's elements by computed font-family and then log them to the console.

At least on Chrome Dev Tools, hovering the logged element will highlight it in the page.

Note that "computed font-family" doesn't mean the element was actually rendered using that font-family, only that it's the font computed from the CSS (or lack thereof, in the case of default fonts).

Getting all elements whose computed font-family includes font X

Here's a similar approach, targeting a specific font:

function getElementsUsingFont(fontName) {  var elements = [];
  document.querySelectorAll('*').forEach(function(element) {    var fontFamily = window.getComputedStyle(element).getPropertyValue('font-family');
    if (fontFamily.includes(fontName)) {      elements.push(element);    }  });
  return elements;}
console.log(getElementsUsingFont('monospace'));

<span style="font-family: monospace">Dragons!</span>