Encodera

Thanks for reading!

Donate to the site — we work hard for you.

How to change the font

Short answer

List the fonts in font-family, separated by commas, and end with a fallback family:

<p style="font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Text in a serif font</p>

The browser takes the first font from the list that the device has. The last word is a generic family: serif, sans-serif or monospace.

A font for the whole page

Set it on the body element — the other elements inherit it:

<style>
  .page { font-family: system-ui, sans-serif; line-height: 1.6; }
</style>
 
<div class="page">
  <h3>Heading</h3>
  <p>A paragraph in the same font.</p>
</div>

system-ui is the operating system's interface font: it is already installed, loads instantly and looks familiar.

A custom font

A font the device lacks is loaded with @font-face or a link to a font service — there is a separate answer on how to use a custom font.

Common mistake

Multi-word names without quotes and a missing generic family at the end. font-family: Times New Roman technically works, but quotes are safer, and without serif at the end a device without that font shows the text in a random default font.

Functions used in this recipe

  • font-family — The font family, with a list of fallbacks.
  • font-size — The size of the font.
  • font-weight — The weight (boldness) of the font.
  • @font-face — Loads a font and gives it a name to use in `font-family`.

Thanks for reading!

Donate to the site — we work hard for you.