Since CSS2 specification Web fonts have been improving the look and readability of websites. Prior to 2008 there wasn't support for embedding fonts on a website.

We now have Web Open Font Format (Woff). Thanks to the struggles by W3C and web standards activists.

Here are some common reasons for web fonts not appearing on your page.

Was the font properly converted to Woff and Woff2?

The font of your choice has to be encoded in Woff and Woff2 format.

Was the font linked to stylesheet file

Woff and Woff2 extension font files have to be linked using relative path in your website's stylesheet file.

Suppose your stylesheet file is named styles.css and is located in /css/ directory. Inside the /css/ directory you have a directory named my-font containing the converted woff and woff2 files.

Suppose your website has the following simple directory structure.

/
├── css/
│   ├── my-font/
│   │   ├── fontname.woff
│   │   └── fontname.woff2
│   └── styles.css
├── images/
├── js/
└── index.html

Your website's root directory is accessed using the famous unix root slash '/'. In this scenerio, to access fontname.woff a user of your website would enter the following in their browsers address bar.

https://yourwebsiteaddress.com/css/my-font/fontname.woff

In styles.css the files fontname.woff and fontname.woff2 will be relative to styles.css. In styles.css the link to woff and woff2 files will begin with "my-font/.." because styles.css is in the css folder.

url('my-font/fontname.woff2')

@font-face {
    font-family: 'FontName';
    src: url('my-font/fontname.woff2') format('woff2'),
         url('my-font/fontname.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Once the font files are linked in your styles.css using @font-face declaration the font can then be used throughout your website. Suppose you want to use the font for all the text on a web page.

Assign the font using the assigned font-family name in your @font-face declaration inside the same styles.css file.

body {
    font-family: 'FontName', sans-serif;
}