Javascript get default font size for browser

Question

I am trying to get the fontsize and fontfamily that my browser uses to display alerts, prompts etc. So I do:
alert(document.body.style.fontFamily); but it shows me a blank alert. Where am I going wrong?

score 6 · Answer 1 · edited Jun 11 '18 at 19:19

Well, I agree with what Kolink says above, but there something you may also want to try:

<body id="body">
<script>
var theCSSprop = window.getComputedStyle(document.body,null).getPropertyValue("font-family");
console.log(theCSSprop); // output: serif
</script>
</body>

With the above code, once you open your FF and change the Proportional setting, you may see the out put is also changed. Have fun :)

enter image description here

score 1 · Answer 2 · answered Mar 05 '13 at 16:03

1

Controls such as alert (confirm, prompt) boxes are rendered by the operating system, not the browser. You cannot control this.

answered Mar 05 '13 at 16:03

Diodeus - James MacFarlane

112,730
33
157
176

Actually they are rendered by the browser, and each browser renders them in its own style. – kennebec Mar 05 '13 at 17:26

score 1 · Accepted Answer · answered Mar 05 '13 at 16:08

SomeElement.style.SomeStyle only picks up styles that are defined in the style attribute of the element. Therefore if you don't specifically have <body style="font-family:blah"> then you will have no result.

It is possible to get the style from the stylesheet using getComputedStyle, however this requires a shim in older IE:

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

And besides, this isn't really what you're looking for.

You can in theory get the default style of text on the webpage like so:

window.getComputedStyle(document.createElement('div')).fontFamily;

However, this isn't necessarily (and usually isn't) the same font as the one used in alerts and prompts. These are rendered by the OS as opposed to the browser, so there is unfortunately no way to know if the user has changed the font in their settings. If it helps, I believe the default for such boxes is Arial 10pt.

score 1 · Answer 4 · answered Mar 05 '13 at 17:21

You can't directly measure a dialog, but you can use a keyword to set the font of an element to a browser system font and examine that element.

You can dynamically create a hidden element with style="font:message-box", this example uses the existing css of a page:

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<style>
.message{border:2px black ridge;font:message-box}
</style>

</head>
<body>

<div class="message">

<p><strong>"Here's another fine mess you've gotten us in."- 
        <em> Oliver Hardy</em></strong></p>
</div>

<script>
onload= function(){
    var who= document.getElementsByTagName('div')[0],props;
    if(window.getComputedStyle){
        who= getComputedStyle(who, ''),
        props= ['font-family', 'font-size', 'font-weight', 
        'line-height'].map(function(itm){
            return itm+': '+who.getPropertyValue(itm);
        });     
    }
    else if(who.currentStyle){//IE<9
        who= who.currentStyle;
        props= ['fontFamily', 'fontSize', 'fontWeight',
        'lineHeight'].map(function(itm){
            return itm+': '+ who[itm];
        });
    }
    alert(props.join('\n'));
}

if(!Array.prototype.map){//IE<9
    Array.prototype.map= function(fun, scope){
        var T= this, L= T.length, A= Array(L), i= 0;
        if(typeof fun== 'function'){
            while(i<L){
                if(i in T){
                    A[i]= fun.call(scope, T[i], i, T);
                }
                ++i;
            }
            return A;
        }
    }
}

</script>
</body>
</html>

Javascript get default font size for browser

4 Answers4