How to Get the Browser's Default Font Family in CSS

How to get the browser's default font family in CSS?

From what I know CSS doesn't offer an option to ignore all previous user styles for a property.

A work-around to your problem may be to use a generic font-family,

font-family: serif;

and let the browser choose.

CSS for browser default font

Unfortunately, there is no simple "initial value" for font-family. It is, as you know, user-agent dependent.

Perhaps the closest you can come is by using a font keyword. font-family:serif; will use whatever the browser considers to be the default serif font. font-family:sans-serif; is the same, for sans-serif.

This is the closest I can suggest, sorry!

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.

What is the default font family in HTML and how can I check this?

Here is an overview of default web browser fonts: http://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults/

You can also download a browser plugin to select some text and get the font name (e.g Font Finder for Firefox)

What is default font for elements in html if no font is set in css

Most browsers have serif as the default font-family when one is not specified. serif resolves to Times or Times New Roman, depending on your operating system, etc.

If you call $(document.body).css("font-family") where a font is not set on the body or a parent element, jQuery will not give you serif, but resolve the browser's default font name and give you that. On Windows, on Chrome, FF, or IE, you'd get "Times New Roman".

What happens when the user sets the browser font size?

The user-defined font size determines the base font size of the root element html. The initial value of font-size as specified by CSS is medium, which in all desktop browsers corresponds to this user-defined size (except Microsoft Edge which follows Windows DPI and accessibility settings rather than having its own). Mobile browsers don't seem to honor the system-wide preference typical of mobile devices, unfortunately. At least, none of Safari on iOS, Internet Explorer on Windows Phone 8.1 or Microsoft Edge on Windows 10 Mobile do.

All other keyword values of the font-size property defined here are scaled to this size, so if the user-defined size is 20px, medium corresponds to 20px and small will almost certainly correspond to a size smaller than 20px.

Media query rems and ems are calculated directly off of this user-defined size, irrespective of the specified font-size property of the root element. Each of the following media expressions:

(max-width: 30rem)
(max-width: 30em)

is equivalent to (max-width: 480px) when the user-defined size is 16px, and (max-width: 600px) when the user-defined size is 20px.

Style rule rems on the other hand are calculated off of the specified font-size of the root element. The following rule:

:root { font-size: 50%; }

makes 1rem in a style rule equivalent to 8px when the user-defined size is 16px, and 10px when the user-defined size is 20px.

Style rule ems and percentages are always calculated relative to ancestor elements so their behavior doesn't change. If the font size of body is declared in ems or percentages then it'd be based off of whatever the font size of html (its parent) is, for example. So on and so forth for all its descendants that don't specify some other size.

The px unit corresponds to a CSS pixel and so its metrics are never affected by the user-defined font size.

The behavior of viewport units and calc() doesn't change, since none of those things depends on an element's font size. As their name suggests, viewport units scale to the size of the viewport.

The most noticeable overall effect this can have on a layout that sizes everything (including widths and heights of boxes) in rems and ems, is that the user can scale the entire layout just by changing their preferred font size. I don't know how useful this is anymore, especially when zoom is a thing.

So, to ensure that your copy is able to accommodate the user's preferred font size without forcing them to zoom, specify all your font sizes in rems or ems where possible. Especially do not specify a pixel font size on html, as that will override the preference completely. You don't necessarily have to specify widths and heights in rems or ems — this really depends on your layout. Not all fluid layouts scale well with different sizes. The most important aspect of this, really, is the size of text, since this feature is intended to scale text to improve readability.

Javascript get default font size for browser

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.

Is the default font-size of every browser 16px? Why?

The base font-size is determined by the users pre-defined preferences within the browser.

In almost every browser, 16px is the standard for proportional fonts. This can also change dependant on if the font uses serifs or is a fixed width font.

Just remember, em is relative to the element it is used on or relative to the inherited parents font-size, and is proportional to that. rem however, uses the root html elements.

For example:

html {
  font-size: 16px;
}
h1 {
  font-size: 2em; // 32px
}
p {
  font-size: 1em; // 16px
}
.someClass {
  font-size: .75em; // 12px
}
.someClass p {
  font-size: 2em; // 24px
}
.someClass p .test {
  font-size: 1.25rem; // 20px
}

<html>
<h1>2em Title Text</h1>
<p>Normal Element Text</p>
<div class="someClass">
  someClass font size
  <p>SomeClass with em</p>
  <p><span class="test">someClass p element with class test</span>
  </p>
</div>

</html>

---

Related Topics