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="f5w">Light Тонкий (Normal + font-weight300)</div>
<div id="f5f">Light Тонкий (Calibri Light + font-weight300, а на самом деле шрифт по умолчанию)</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 Light2";
    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 Light2';}
#f5w {font-family:'Calibri';font-weight:300;}
#f5f {font-family:'Calibri Light';font-weight:300;}
#f6 {font-family:'Calibri Light Italic';}