Adding a custom font to a web page

NicolasBrondinBernard

Tired of the default fonts available on every machine? Here's how to add new ones to your website!

Article published on 11/03/2024, last updated on 10/08/2026

By default, using the CSS rule font-family only allows you to use a font that is already installed on the machine of the person visiting your website (or web application).

But it is possible to include new fonts on your page, very easily!

To do this, there are two solutions:

Include the font file directly in your site
Use a font that is already hosted online

nicolasbrondinbernard_a_ancient_book_opened_with_hieroglyphs_wr_d73e106b-fae6-41e9-b86a-e35fca41de09.jpg

Including a file

To include a new font locally on your web page, all you need to do is paste the font file (.otf or .ttf preferably) into a folder of your project, and use the @font-face directive, like this:

@font-face {
    font-family : Roboto;
    src: url(fonts/roboto.ttf);
}

Here we've imagined that our file is located in a fonts subfolder, but feel free to choose its location!

Once your font is loaded thanks to the @font-face directive, you can use it directly in your CSS:

p {
	font-family : Roboto;
}

And that's it.

Watch out for weights

When you import a font locally, it's this single file that will be used, regardless of the font-weight values you use. For example, for the following code:

strong {
	font-family: Roboto;
	font-weight: bold;
}

It's the browser that will simulate the bold version of the font, since you've only provided it with a single variation of the font.

The rendering may therefore be perfect at weight 400 (normal), but look much worse at weight 700 (bold)!

This is why it's useful to go through platforms that offer fonts adapted for the web, as explained below.

Using an online font

Many platforms allow you to find complete fonts according to the style you're looking for, and with several weights available.

This is notably the case with Google Font

And besides providing you with very good free fonts, these platforms sometimes give you CSS files that configure the fonts with a different file per weight, which allows for the best possible rendering!

You can directly add this file as a dependency of your CSS code with the @import directive as here:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

You'll notice that the different weights of the font are defined in the url by wght@400;700;900

Or directly as a standalone CSS file that we're going to add to our HTML document:

<head>
    <!-- ... -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
</head>

Watch out for font weight (file size)

Each new font, and each weight increases the final weight of the page. So you need to follow two rules:

Only add the fonts you really need (and remove them if they're unused)
Only add the variations you need for each font (some may have up to 10 different ones), and integrate them as you use them

Finished reading this article?

Our newsletter1 email a week to understand it all

Go further

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

No comments yet