How to Add Non-Standard Fonts to a Website

To make the design of your website attractive, you can use some unique fonts. In this tutorial, we will introduce the most common methods of adding custom fonts.

The CSS @font-face rule is a universal approach to add custom fonts to your website. Let’s see how we can do it.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use an <h1> tag.
  • Place the content inside a <div> tag.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>@font-face example</h1>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Add CSS

  • Define a name for the font ('myFont') in the @font-face rule.
  • Use the font-family property to create a prioritized list of font family names for the selected element.
@font-face {
  font-family: 'myFont';
  src: url('webfont.eot');
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
       url('webfont.woff2') format('woff2'), 
       url('webfont.woff') format('woff'), 
       url('webfont.ttf') format('truetype'), 
       url('webfont.svg#svgFontName') format('svg');
}
body {
  font-family: 'MyFont', Fallback, sans-serif;
}

Let’s see the result.

Example of adding a custom font with the @font-face rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.eot');
        src: url('webfont.eot?#iefix') format('embedded-opentype'), 
             url('webfont.woff2') format('woff2'), 
             url('webfont.woff') format('woff'), 
             url('webfont.ttf') format('truetype'), 
             url('webfont.svg#svgFontName') format('svg');
      }
      body {
        font-family: 'MyFont', Fallback, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>@font-face example</h1>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

We can also add some unique fonts from Google Fonts and use them with the @font-face rule. For this, we need to add a special stylesheet link to our HTML document, then refer to the font in a CSS style. It’s quite easy to implement these fonts.

Example of adding a unique font with Google Fonts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet">
    <style>
      h2 {
        font-family: 'Courier Prime', monospace;
        font-weight: 700;
      }
      div {
        font-family: 'Courier Prime', monospace;
      }
      p {
        font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h1>@font-face example</h1>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <p>
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Although the CSS @font-face rule has good browser support, each browser has its format: TTF, OTF, EOT, SVG, SVGZ, WOFF, WOFF2.

WOFF (Web Open Font Format) fonts use a compressed version of the structure used by the OpenType (OTF) and TrueType (TTF) fonts. They often load faster than other formats. WOFF fonts also allow attaching additional metadata to the file. The new generation of this format is WOFF2.

EOT (the Embedded Open Type) fonts enable OpenType and TrueType fonts to be linked to the web page for rendering it with the needed font.

SVG (Scalable Vector Graphics) is a simple way to embed glyph information for rendering engines. It offers smaller file sizes. SVG has a zipped version: SVGZ.