How To Add Custom Fonts To Your Website – Simple Examples

Welcome to a quick tutorial on how to add custom fonts to your website. So, your website is a little boring and you want to use a different font? Yes, it is totally possible to do so, but it requires a little bit of coding.

To add custom fonts to your website:

  1. Upload the font to the server.
  2. Then define the custom font in the CSS – @font-face { font-family: ANY-NAME-YOU-LIKE; src: url(FONT.FILE); }
  3. Finally, use the font – body { font-family: ANY-NAME-YOU-LIKE; }

That’s all. But let us walk through some actual examples in this guide, as well as using alternative web fonts. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Custom Fonts Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

CUSTOM FONT

All right, let us now get into the various examples of how to set a custom font in HTML and CSS.

 

1) CSS FONT FACE

1-font-face.html
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Font Demo</title>
    <style>
    /* (A) DEFINE FONT FAMILY NAME + WHICH FONT FILE TO USE */
    @font-face {
      font-family: ABZ; /* CAN BE ANYTHING YOU WANT */
      src: url('ABeeZee-Regular.otf');
    }
 
    /* (B) USE ABEEZEE FOR ENTIRE WEBSITE */
    html, body { font-family: ABZ, sans-serif; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>

As in the introduction above:

  1. First, we need to upload the font file to the server.
  2. Then assign a custom font in CSS with @font-face.
    • Define a font-family, which is any custom name you want.
    • Point to the source font file src: url('FONT.FILE').
  3. Finally, just use it – font-family: CUSTOM-FONT-NAME.

 

 

2) MULTIPLE FONTS

2-multiple.html
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Font Demo</title>
    <style>
    /* (A) DEFINE FONT FAMILY NAME + WHICH FONT FILE TO USE */
    @font-face {
      font-family: ABZ; /* CAN BE ANYTHING YOU WANT */
      src: url('ABeeZee-Regular.otf');
    }
    @font-face {
      font-family: Roboto;
      src: url('Roboto-Regular.ttf');
    }
 
    /* (B) USE ABEEZEE FOR HEADINGS */
    h1, h2, h3, h4, h5 { font-family: ABZ, sans-serif; }
 
    /* (C) ROBOTO FOR PARAGRAPHS */
    p { font-family: Roboto, sans-serif; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>

Can we use multiple custom fonts? Of course, we can.

  • Define as many @font-face as you like.
  • Then assign where to use which font accordingly.

 

 

3) WEB FONTS – GOOGLE FONTS

Don’t have access to upload font files to the server? An alternative is to use web fonts, and Google Fonts is a good place to find a ton of them. Very easy to use too.

 

SELECT FONT

On the Google Fonts website, simply search for the fonts that you want, and click on “select this style”.

 

COPY SNIPPET

Copy the <link> snippet.

 

PASTE INTO WEB PAGE

3-google-fonts.html
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Font Demo</title>

    <!-- (A) LOAD FROM GOOGLE FONTS -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <!-- (B) USE CUSTOM FONTS -->
    <style>
    html, body { font-family: Roboto, sans-serif; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>

Lastly, just insert the snippet and use the font.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

FONT FORMAT SUPPORT

There are a ton of different font formats in the world – ttf, otf, woff, woff2, eot, and more. But sadly, the file formats are not universal, and browsers don’t support all of them. If you want to be on the safe side, stick with using the common ones only – ttf, otf, and woff.

 

PERFORMANCE CONSIDERATIONS

Yep, custom fonts are cool. But remember that browser still have to download the font files. They add bloat to the loading times and will slow websites down. Just don’t go overly crazy with too many custom fonts.

 

HOW ABOUT BLOGGER, WIX, SQUARESPACE, WORDPRESS?

  • WordPress – Appearance > Customize > Additional CSS (Depending on your theme, this may be different)
  • Blogger – Template > Edit HTML > Insert or update the <style> in the <head> section.

As for the rest, sorry that I cannot answer every single one, or this guide will never end. You will have to do your own research on how to change the CSS or set fonts on your own.

 

WHERE TO FIND FONTS?

The few places that I frequent are:

 

INFOGRAPHIC CHEAT SHEET

Add Custom Fonts In HTML CSS (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *