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? Suppose I have the following CSS rule in my page: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } How could I detect which one of the defined fonts were used in the user's browser? For people wondering why I want to do this is because the font I'm detecting contains glyphs that are not available in other fonts. If the user does not have the font, then I want it to display a link asking the user to download that font (so they can use my web application with the correct font). Currently, I am displaying the download font link for all users. I want to only display this for people who do not have the correct font installed. One thing to keep in mind is that some browsers will replace certain missing fonts with similar fonts, which is impossible to detect using the JavaScript/CSS trick. For example, Windows browsers will substitute Arial for Helvetica if it's not installed. The tr...