Last Updated:

How to Add a Font to Text in your Website using HTML and CSS

Gab
Gab Archived

Adding a font to text in your website using HTML and CSS is fairy easy and simple, and we'll show you how in this article.

Table of Contents

Writing the CSS

Let's quickly write the CSS. For this tutorial, we'll name it "font-text". We'll also use the font "Codec Pro".

.font-text {
}

Now, we have to import the font itself. You can using fonts.google.com or cdnfonts.com. Find a font in mind, and you should be given instructions on how to add it to your website:

cdnfonts.com instructions for importing fonts

So now on top the very top line of your .css file, you can add the @import. It should look like this:

@import url('https://fonts.cdnfonts.com/css/codec-pro');
.font-text {
}

Great! We're halfway there. All we need is to set font-text to have the font "Codec Pro"

@import url('https://fonts.cdnfonts.com/css/codec-pro');
.font-text {
font-family 'Codec Pro', sans-serif;
}

If it confuses you, in the instructions above, it said to use the following CSS rules to specify these families. The format for font-family is:

font-family: 'font-name', typeface;

You can use font-family on any CSS class you want.

If you want to set the font to your entire website, you can also do that using the html class.

html {
font-family: 'Codec Pro', sans-serif;
}

Notice how there's no dot before html. It's very important as html is an element and not a class, it applies to the whole page/website.

Writing the HTML

Writing the HTML is also easy. Just add the class to any text, whether that be <h1>, <h2>, <h3>, <p>, or <span>

<p class="font-text">hello world</p>

And you've successfully added a font to a text in your website!