How to Implement Custom Fonts in HTML and CSS
This guide explains how to integrate custom fonts into an HTML document and then call the fonts from within the CSS files.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

This video will take us through the process of incorporating custom fonts. These fonts can provide a more put together look and professional uniqueness to your webpage.

In this section, we are going to implement custom fonts with CDNs, an outside service from which we'll discover different fonts. We'll also cover backup fonts that your browser renders if it encounters any problem with the main font. These background fonts, in general, should look similar to your main font.

Start by going to fonts.google.com. Here, you'll have plenty of fonts, so choose the one you prefer.

large

You are able to type the name of a font if you know it, or you can search based on different categories. In the right-hand side, further customization is available.

I like a font called "Montserrat", but feel free to experiment with different font sizes and types.

When you select a font, you'll get access to its code. Copy it.

large

Paste this code in our HTML file above the link to our CSS file. Now, place it above because it needs to be called first. Next, copy and paste the CSS code into the body tag. Notice, we already have a font-family, so just replace it with this code.

The entire webpage now has the new font.

large

Sometimes, you may want specific areas of the code to have different fonts. In such a case, put the corresponding code inside the appropriate tag. For example, if I want this font only for the heading, then I can say,

h1 {
  font-family: 'Montserrat', sans-serif;
}

Likewise, we can try other fonts for other sections of our webpage but remember to paste both the HTML and CSS code. While pasting HTML code, you can put different font links in any order, but all of them must be before the link to CSS file.

Now, even if I have a custom font, say something called "Raleway" in the body tag, the heading tag will continue to have only "Montserrat", as I've defined it separately for the h1 tag. Other areas still have "Raleway".

large

Now, if you look at our font code, we are asking the browser to display content in "Raleway" or "Montserrat". But sometimes,
these fonts may not be available for a number of reasons. For example, this problem may occur if a browser is not connected to the Internet. In such a case, we're asking the browser to display everything in the ((backup font**, sans-serif, instead. Since it looks similar to both "Raleway" and "Montserrat", it's not going to affect the user experience in any way.

This is how we can use custom fonts on our web page.

Resources