Menu
How do I get the actual font face and font size of an element when the CSS font-face and font-size properties are not defined?
For example, the JavaScript snippet
object.style.fontFamily
does not return any value. That's pretty obvious, assuming CSS hasn't applied a style to object anywhere. But, of course, a certain font is used to render the text, probably the system font or the webbrowser default font.
So can, for instance, JavaScript get that rendered font?
942
There is a better way! Chrome Developer tools can show you the exact rendered fonts for a given web page with just a few clicks. Right click on any element in the page and select Inspect. Next head over to the Computed tab, scroll down, and you'll quickly notice the rendered fonts for the page.
Add a font-face section to your CSS codesrc: url('fonts/lovely_font. otf') format('opentype'); src: url('fonts/lovely_font. ttf') format('truetype'); As another optional efficiency measure, we can get the browser to check for a local copy of the font in case the user already has it.
But, of course, a certain font is used to render the text, probably the system font or the webbrowser default font. So can, for instance, JavaScript get that rendered font? Java or Flash can do it. JS - cannot give you names of the font, but you can try to detect font by deciphering text render in canvas.
I found a way (for all browsers which support <canvas> ), by checking pixel for pixel if the font rendering has changed If you are using this for another dialect (e.g. japanese) you may want to change the testString variable to the most common characters in that dialect.
There is no standard, reliable method for determining the actual font being used. The previous answers here will report the styled fontFamily style value, but that can be a list of font names and doesn't specifically identify the actual font rendered (which was the actual question posed here).
You can name a font Foo, but still render Arial, or reference monospace, which renders Consolas. Chrome knows, but doesn't expose that info = ( The devtools have a Rendered fonts section in Computed which is always correct, but it uses those hidden methods.
I suggest this function:
function css( element, property ) { return window.getComputedStyle( element, null ).getPropertyValue( property ); } Usage:
css( object, 'font-size' ) // returns '16px' for instance Note: getComputedStyle doesn't work in IE8.
Live demo: http://jsfiddle.net/4mxzE/
125
There is no standard, reliable method for determining the actual font being used. The previous answers here will report the styled fontFamily style value, but that can be a list of font names and doesn't specifically identify the actual font rendered (which was the actual question posed here).
(As mentioned in some comments, there are ways to guess at the font by inspecting visual cues, but that isn’t likely to be 100% reliable.)
44
You can find the information about the rendered font in Chrome/Firefox Developer Tools. Try inspecting the paragraph in the following code snippet:
p { font-family: sans-serif; }<p>Some text and <span title="an emoji">😁</span></p>In Chrome Developer Tools (tested on 55.0.2883.75 m 64-bit) you get the following information:
In Firefox Developer Tools (tested on 47.0.2 with about:config > devtools.fontinspector.enabled = true) you get the following information:
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
