Чаще всего ошибка в подключении шрифта заключается в неправильном указании значения font-family, для разных начертаний:
@font-face{
font-family: 'name';
src: url('../fonts/font-regular.otf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'name-bold';
src: url('../fonts/font-bold.otf');
font-weight: bold;
font-style: normal;
}
Теперь если использовать тег strong - он всё равно будет иметь иметь начертание regular и выглядеть размыто, так как начертание bold подключено неправильно!
Всё очень просто, для начертания bold нужно указать тоже самое значение что и в font-family для regular, то есть не name-bold, a name:
@font-face{
font-family: 'name';
src: url('../fonts/font-regular.otf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'name';
src: url('../fonts/font-bold.otf');
font-weight: bold;
font-style: normal;
}
Теперь если использовать тег strong - он будет корректно отображаться и использовать начертание bold.
Это же правило действует и для любых других начертаний:
@font-face{
font-family: 'name';
src: url('../fonts/font-regular.otf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'name';
src: url('../fonts/font-bold.otf');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: 'name';
src: url('../fonts/font-bold-italic.otf');
font-weight: bold;
font-style: italic;
}
@font-face{
font-family: 'name';
src: url('../fonts/font-italic.otf');
font-weight: normal;
font-style: italic;
}