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#

(you can find this file at: Archive.zip)
Wrong Approach#
A mistake I’ve been make 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 variant.
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 draw back of this wrong approach is that, the font-weight
property may no longer work:

However, some font may able to get bolded (or italic( effect throught the by browser through “artificailly 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
, if you set font-synthesis:none
then this simulate will not happen).
But please note that
- This simulated font will likely be different to the native provided font, see below:

- Different browser may use slightly different emulation strategies for faux fonts , see below:

(source: https://stackoverflow.com/questions/79683438/different-behaviour-edge-and-chrome-with-font-weight)
Correct Approach#
The correct approach is to declare the multiple font @font-face
of same name, but also specifying the font-weight
and font-style
for that 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 override it in the body
(or html
) level. (As the default font-family
is to inherit its parent’s)
1
2
| body{font-family: 'MyCustomFont', san-serif;}
/* This is all you need !!!!!!!!!!!!!!!!!!*/
|
Reference#