How to Detect Which One of the Defined Font Was Used in a Web Page

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)

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 check which fonts are loaded but not used on a website?

If you think you can do it automatically I think it can't. But you can search manually in your CSS name of the fonts, if you not see the result (show nothing) in your code you can remove it.

How can I determine which font in font-family my browser has matched?

I use http://www.chengyinliu.com/whatfont.html it's a Chrome extension which is really nice when I don't feel like inspecting the code. Just click a button and it displays in a tooltip what font / font size a font is just by clicking the text.

How can you determine what font from the CSS stack is being used?

How do I now which font family is used for text on web-page

In chrome, using the inspector, select the exact TAG you want to check. Select the "computed" styles tab, at the end you will find wich font of the stack have been used. For 'code' here the fontstack is Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif and you can check that in my computer it used exactly "Consolas" (bottom-right on the image)

EDIT: Added FF screenshot. Same work in firefox, just select the specific TAG you want to check.

chrome inspector, rendered font
firefox inspector, rendered font

Use jQuery to detect which font Browser selected

It's a little complicated to do.

DetectFont accepts an element to check and uses getComputedStyle to get a list of the fonts. It compares the widths of the fonts in getComputedStyle using canvas and the measureText method to figure out which one is actually being rendered on the client.

How can I be sure all of my users have this font-family?

You can declare multiple fonts using the font-family rule. If the first font on the list is not available, the next will be used as a fallback. For example, if you set your font-family to the following:

font-family: 'Bookman Old Style', Arial, sans-serif;

the browser would at first try to load Bookman Old Style font, and if not available, it would try to load Arial font, and if it's not available too, it would load the default sans-serif font.

So when the user doesn't have this font installed, you can choose similar font which maybe is installed, so your webpage wouldn't look so ugly.

If you own this font (i.e. either it's free or you bought it), you can use @font-face declaration to include it on your page. For example:

@font-face {
  src: url("http://example.com/your-font.woff2");
  font-family: 'Your Font';
}
body {
  font-family: 'Your Font', Arial, sans-serif;
}

In this case browser will fetch the font from the URL you specified and apply it to <body>. If the request for font fails, or before the font has been loaded, browser will apply the fallback font (i.e. Arial).

How to Detect Which One of the Defined Font Was Used in a Web Page