Where to set font-family: body or html element?

Question

Where is it best to declare the font-family CSS property? On the html or body element?

html {
    font-family: sans-serif;
}

or

body {
    font-family: sans-serif;
}

I searched online, but I cant find a definitive answer.

I would suggest to make a css class property and apply it there. using `` — Sorangwala Abbasali, Mar 21 '17 at 11:25
font-family is a CSS property, so it belongs neither to the html nor the body tag. — Bastian Voigt, Mar 21 '17 at 11:27
Check this http://stackoverflow.com/questions/6739601/what-is-the-difference-between-applying-css-rules-to-html-compared-to-body and http://stackoverflow.com/questions/7187569/whats-the-difference-in-applying-css-to-html-body-and for clarification. — shubham agrawal, Mar 21 '17 at 11:30
If you are using `rem` units, make sure to set the base font size on the `html` element. `rem` units are based off the font size of the root element, which is the `html` element. — Gavin, Nov 27 '19 at 06:59

Kal · Answer 1 · 2021-07-05T22:48:34.597

The short answer is, you can use either. Since every displayed element is a descendant of the body element, and the body element itself is the child of the html element, all elements that inherit the font-family property will happily adopt it from either. (If a particular element doesn't inherit it, you can always override its font-family property with a value of inherit.)

But what is best practice, and why? That's a bit harder to answer, but I'll have a go. Let's start with semantics…

The html element represents the whole document (including non-visible metadata), while the body element represents the content of the document. Since font-family is a property of styled content, it would seem logical to apply it to body. That's one point for body.

Next question: Where do the browsers define text formatting properties like font-family? I looked at the user agent stylesheets for Safari (WebKit), Mozilla Firefox and Chrome, and also used the Web Inspector on a page with no overriding CSS, but I couldn't find a global font-family declaration anywhere. But here's something interesting… In Safari, the global text color property is defined on the html element. So, if that's anything to go by, it suggests WebKit browsers do define global font properties on the html element.

There are CSS resets that also tackle it here, like Bootstrap's _reboot.scss file:

// 2. Change the default font family in all browsers.
html {
   font-family: sans-serif; // 2
   …
}

Still, we can override this on the body element, and that is just what Bootstrap does a few lines later:

body {
   margin: 0; // 1
   font-family: $font-family-base;
   …
}

Half a point to html?

The CSS specs (as far as I know) don't dictate where font-family is declared (it applies to 'all elements'), but it does give us some hints. The first code example in the W3C document CSS Fonts Module Level 3 is this:

body {
   font-family: Helvetica;
   font-weight: bold;
}

Another one is here:

body {
   font-family: "Gill Sans", sans-serif;
   font-size: 12pt;
   margin: 3em;
}

It explains:

The first declaration on the BODY element sets the font family to "Gill Sans". If that font is not available, the user agent (often referred to as a "browser") will use the sans-serif font family which is one of five generic font families which all users agents know. Child elements of BODY will inherit the value of the font-family property.

Another point to body.

Final scores:

body: 2
html: 0.5

Winner: body! :-D

nashcheez · Answer 2 · 2017-03-21T11:39:29.050

10

Best practice is to set the font-family in the body.

body {
   font-family: Arial !important;
}

The !important is useful here so that in case you are using any other framework, your font-family does not get overridden.

You can also use the * selector.

* {
    font-family: Arial !important;
}

The *-selector means any/all elements, but will obviously be on the bottom of the property chain when it comes to overriding more specific selectors.

Note that the !important flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).

edited Mar 21 '17 at 11:39

answered Mar 21 '17 at 11:31

nashcheez

5,067
1
27
53

You say to set it in the body yet your example sets it for `` – Rob Mar 21 '17 at 11:36
10

Any reason as to why this is best practice? Care to expand or add a source? – Bjørnar Hagen Apr 19 '18 at 09:04
1

People are way too trigger happy with the universal selector (*) IMO. It's an inefficient selector that literally selects Every. Single. Element. (The cascade exists to avoid this sort of thing.) Stamping it with `!important` is heaping sin upon sin. – Kal Jul 02 '21 at 06:01

score 5 · Answer 3 · answered Jan 18 '21 at 17:55

5

The * selector will give you better coverage. For example, form elements, like input, don't inherit font styles from html and body tags. But if you set it with * then you'll make sure your font styles pass down to all HTML elements.

* {
  font-family: 'Open Sans', Helvetica, sans-serif;
}

Here's a demo. Using * selector vs html and body.

answered Jan 18 '21 at 17:55

VakoShvili

86
1
5

This is precisely the reason why I believe this method is best. I guess the question now is will it overwrite even the font family of embeds with iframes? – Victor Eke Oct 03 '22 at 22:17

score 0 · Answer 4 · answered Mar 21 '17 at 11:29

0

The best way to add styles to <body> tag. Because it contains hierarchy, so it follows that it must contain all global styles.

Refer: https://css-tricks.com/html-vs-body-in-css/

answered Mar 21 '17 at 11:29

sansan

783
1
6
21

Your explanation for using `` makes no sense. What does 'it contains hierarchy' even mean? The CSS-Tricks article is a good read though. – Kal Jul 02 '21 at 06:10

score 0 · Answer 5 · answered Mar 21 '17 at 11:39

Depending on the project the best place would be a separately linked style page that contains all your css code. But from your question it sounds as if you want to write it into your HTML.

And if you want to do it in the same file as your HTML, than an internal style sheet is the 2nd best choice, and place "style" tags within your "head" tags and write your CSS within the "style tags.

<head>
  <style>
    <!–– Insert CSS Code Here -->
  </style>
</head>

Otherwise you just write it inline (at the point of the element you are trying to style).

Now what method is best depends on the project but it is generally thought that an external style sheet is the first option as it makes it easy for someone else to follow along with which elements are affected by what styling. If it's a small project with not much CSS than an "Internal Style Sheet is the next best option, again for readability and keeping your CSS in one place. Inline styling although possible is not really encouraged.

Thank you for answering, I have updated my question as it was unclear what I was asking for. — Frank Underwood, Mar 21 '17 at 12:10

score 0 · Answer 6 · answered Mar 21 '17 at 13:36

0

I assume that you will have one font family on website, the best way to do that is to use

* selector, this one select all elements so:

*{
   font-family:"your-font-family";
}

answered Mar 21 '17 at 13:36

Marko.dev

316
1
11

score 0 · Answer 7 · answered Mar 21 '17 at 13:43

If you are trying to change the font-family of the entire page I would have to agree with user7357089 and nashcheez that the "best" method would be to place it in the body tag. All of your visible HTML would be contained within the body tag anyway, adding it to the HTML would be unnecessary.

score 0 · Answer 8 · answered Jul 05 '21 at 11:37

As others have said, it would probably make sense to specify the font-family on the body. However, since there isn't exactly very many downsides to applying it to the html element, I thought it would be worth mentioning the :root pseudo-class selector, which selects the root of the page (the html element in most scenarios) and could be more convenient in this scenario.

Usually, the :root selector is used to set CSS custom properties (variables) and font-sizes, but I'd say it would be reasonable to apply a font-family on it.

:root {
  /* ...custom properties, font-size, etc... */
  font-family: sans-serif;
}

score 0 · Answer 9 · answered Oct 25 '21 at 19:52

0

I know most people set the font family on the body element. But since there is no right or wrong (all elements are children of the html and body element), pick one and stick to it. This goes for all of the programming choices you make. This makes debugging your work a lot easier.

answered Oct 25 '21 at 19:52

Rogier

23
5

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 25 '21 at 20:54

score -4 · Answer 10 · answered Jan 21 '20 at 21:44

for change font-family for your site, you can use this :

*{
   font-family:"your-font-family";
}

or this :

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
  font-family: iransans !important;
}

Where to set font-family: body or html element?

10 Answers10

Linked