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.

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>

Try it Yourself »

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.woff2') format('woff2'), 
       url('webfont.woff') format('woff');
}
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.woff2') format('woff2'), 
             url('webfont.woff') format('woff');
      }
      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>

Try it Yourself »

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/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet" />
    <style>
      h1 {
        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>

Try it Yourself »

Although the CSS @font-face rule has good browser support, modern browsers primarily use WOFF2 and WOFF formats. WOFF2 offers the best compression and performance. WOFF (Web Open Font Format) uses a compressed structure similar to OpenType (OTF) and TrueType (TTF) fonts, allowing faster loading and metadata attachment. Older formats like EOT and SVG are largely obsolete and no longer recommended for modern web development.