How to Apply Global Font to the Entire HTML Document

Sometimes you may face the situation when there is a need to apply the same font-family and font-size to the entire HTML document.

In this snippet, we’re going to apply a global font format to the whole HTML page.

Here, you can find two examples, one of them with the CSS !important rule applied.

Create HTML

Use <h1> and <p> elements.

<h1>Heading</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>

Add CSS

Add the CSS body selector to target all elements inside the document.
Set the font-size, font-family, line-height, and color properties.

body {
  font-size: 16px;
  line-height: 1.625;
  color: #202013;
  font-family: Nunito, sans-serif;
}

Note

The universal selector (*) can impact performance on large documents. Using body or :root is generally more efficient and follows best practices for specificity.

Example 1: Applying a global font to the entire HTML document

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 16px;
        line-height: 1.625;
        color: #202013;
        font-family: Nunito, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

If you need to ensure that nothing can override what is set in that style, use the CSS !important rule. It increases the priority of the declaration, ensuring other styles cannot overwrite it.

Next, we’ll demonstrate an example where we use the !important rule for all our CSS properties.

Example 2: Applying a global font using the !important rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 16px !important;
        line-height: 1.625 !important;
        color: #202013 !important;
        font-family: Nunito, sans-serif !important;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Warning

Remember that it isn't recommended to use the !important rule. If possible, try to avoid its usage.