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 * (asterisk) selector to select all the elements of the document.
Set the font-size, font-family, line-height, and color properties.

html * {
  font-size: 16px;
  line-height: 1.625;
  color: #2020131;
  font-family: Nunito, sans-serif;
}

Example of applying a global font to the entire HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html * {
        font-size: 16px;
        line-height: 1.625;
        color: #2020131;
        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 is used to ignore the inner formatting of text, i.e., other styles cannot overwrite the styles with !important.

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

Example of applying a global font to the entire HTML document using the !important rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html * {
        font-size: 16px !important;
        line-height: 1.625 !important;
        color: #2020131 !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>