This method works fine in most browsers, but is incorrect. Omitted in this example:
There is no font name in the local property.
Only one font format is connected.
Faces configured incorrectly.
The @font-face src rule allows you to specify the name of the local font, i.e. if the user already has the required font installed on his computer, then it will be used, and the speed of loading and rendering of the page will significantly increase.
Four formats are used today, let's take a closer look at them:
TTF/OTF - works in most browsers except IE.
EOT - Created by Microsoft, represents a compressed copy of the TTF font, supported on IE only.
WOFF - The format is a compressed font in TTF/OTF format.
WOFF2 - has improved compression compared to the first version.
As you can see, there is no single format that is supported by all browsers, so you need to connect several files, the browser will choose the appropriate format itself. It is recommended to include font files by priority:
<p class="text-1">Crimson Text Regular</p>
<p class="text-2">Crimson Text Bold</p>
<p class="text-3">Crimson Text Italic</p>
<p class="text-4">Crimson Text Bold Italic</p>
<p class="text-5">Crimson Text Semi Bold</p>
<p class="text-6">Crimson Text Semi Bold Italic</p>