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`.