Подключение стороннего шрифта

Чаще всего ошибка в подключении шрифта заключается в неправильном указании значения 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;
}