JSFiddle - React, Tailwind, and code Playground

HTML

<div>А тут шрифт по умолчанию</div>
<div id="f1">Normal Обычный</div>
<div id="f2">Bold Полужирный</div>
<div id="f3">Italic Курсив</div>
<div id="f4">Bold Italic Полужирный Курсив</div>
<div id="f5">Light Тонкий</div>
<div id="f6">Light Italic Тонкий Курсив</div>

CSS

@font-face {
    font-family :"Calibri Bold";
    src:local("Calibri Bold");
}
@font-face {
    font-family :"Calibri Italic";
    src:local("Calibri Italic");
}
@font-face {
    font-family :"Calibri Bold Italic";
    src:local("Calibri Bold Italic");
}
@font-face {
    font-family :"Calibri Light";
    src:local("Calibri Light");
}
@font-face {
    font-family :"Calibri Light Italic";
    src:local("Calibri Light Italic");
}
#f1 {font-family:'Calibri';}
#f2 {font-family:"Calibri Bold";}
#f3 {font-family:'Calibri Italic';}
#f4 {font-family:'Calibri Bold Italic';}
#f5 {font-family:'Calibri Light';}
#f6 {font-family:'Calibri Light Italic';}