TL;DR; Screenshot

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

body{
    font-family: 'MyCustomFont', san-serif;
}

Comparison of the CORRECT and WRONG approach

2025-08-06T172742

(you can find this file at: Archive.zip)

Wrong Approach

A mistake I’ve been making until today is declaring separate font-family names for each font weight or style. Here’s an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont-Regular.woff2') format('woff2');
    /*OR src: url("MyCustomFont-Regular.ttf") format("truetype"); */
}
@font-face {
    font-family: 'MyCustomFont-Bold';
    src: url('fonts/MyCustomFont-Bold.woff2') format('woff2');
    /*OR src: url("MyCustomFont-Bold.ttf") format("truetype"); */
    
}
@font-face {
    font-family: 'MyCustomFont-Italic';
    src: url('fonts/MyCustomFont-Italic.woff2') format('woff2');
    /*OR src: url("MyCustomFont-Italic.ttf") format("truetype"); */
    
}

While this method works, it can lead to unnecessary complexity. Each time you need to use a different weight or style, you must remember the specific font-family name, which can be error-prone and cumbersome as you need to declare the font family for all the variants.

1
2
3
4
5
6
7

body                                { font-family: 'MyCustomFont', san-serif;      }
strong, b, bold, ...                { font-family: 'MyCustomFont-Bold', san-serif; }
italic, i, ...                      { font-family: 'MyCustomFont-Italic';          }
...
div.card > h2.title > a             { font-family: 'MyCustomFont-Bold', san-serif; }
div.breadcrumb > :not(.active) > a  { font-family: 'MyCustomFont-Italic';          }
... ...

The drawback of this wrong approach is that the font-weight property may no longer work:

2025-08-06T170156

However, some fonts may be able to get bolded (or italic) effects through the browser using “artificially simulated bold effect” approach, this is known as “faux bold”. The on/off of this emulation of effects can be controlled through the font-synthesis property. If you set font-synthesis:none, then this simulation will not happen.

But please note that

  1. This simulated font will likely be different from the native provided font, see below:

2025-08-06T172853

  1. Different browsers may use slightly different emulation strategies for faux fonts, see below:

2025-08-07T084320

(source: https://stackoverflow.com/questions/79683438/different-behaviour-edge-and-chrome-with-font-weight)

Correct Approach

The correct approach is to declare multiple @font-face declarations with the same name, but also specifying the font-weight and font-style for each font:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "MyCustomFont";
    src: url("MyCustomFont-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

This approach is much more unified. Instead of overriding the font-family everywhere, you’ll just need to set it at the body (or html) level. (As the default font-family is to inherit from its parent)

1
2

body{font-family: 'MyCustomFont', san-serif;}
/* This is all you need !!!!!!!!!!!!!!!!!!*/

Reference