JSFiddle - React, Tailwind, and code Playground
HTML
<div class="a">ELENA LELENA</div>
<div class="b">ELENA LELENA (флаг 100 присвоен жирному варианту)</div>
<div class="c">ELENA LELENA (флаг italic присвоен жирному варианту)</div>
<div class="d">ELENA LELENA (браузер делает жирным ибо флаг 700 никакому подгруженному шрифту не присвоен)</div>
<div class="e">ELENA LELENA</div>
<div style="font-style:italic;">шрифт не содержит кириллицы потому в 3-м строке для кириллицы используется дефолтный шрифт с font-style:italic; <span style="font-weight:700;font-style:normal;">а в 4-й дефолтный с font-weight:700;</span></div>
CSS
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 100;
src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr0bathaSTBR2c4i13_wzlb0.woff) format('woff');
}
@font-face {
font-family: 'Titillium Web';
font-style: italic;
src: local('Titillium WebBold'), local('TitilliumWeb-Bold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr0bathaSTBR2c4i13_wzlb0.woff) format('woff');
}
.a {
font-family: 'Titillium Web';
font-style: normal;
}
.b {
font-family: 'Titillium Web';
font-weight: 100;
}
.c {
font-family: 'Titillium Web';
font-style: italic;
}
.d {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 700;
}