Почему не отображается подключенный шрифт Open Sans Bold?

Question

[RedSmoke_smr]

Добрый день!
Подскажите пожалуйста, почему у меня на сайте не отображается подключенный шрифт Open Sans Bold?
Скачал все шрифты, скопировал в папку fonts потом в CSS через font-face я подключил два скаченных шрифта, это Open Sans Regular и Open Sans Bold. Regular отлично отображается и заметно его начертание, а вот когда вместо него пишу жирное начертание оно не отображается, вместе этого показывается обычный стандартный шрифт.
Прошу помочь разобраться в вопросе

Код в начале CSS файла:

@font-face {
  font-family: 'Open Sans Bold';
  src: url('/../fonts/OpenSans-Bold.eot');
  src: url('/../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
  url('/../fonts/OpenSans-Bold.woff') format('woff'),
  url('/../fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans Regular';
  src: url('/../fonts/OpenSans-Regular.eot');
  src: url('/../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
  url('/../fonts/OpenSans-Regular.woff') format('woff'),
  url('/../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Подключение к блоку:

body {
  color: #000000;
  font-family: 'Open Sans Bold', sans-serif; //и этот не отображается, а если поменяю на Regular то все норм
  font-size: 15px;
  line-height: 24px;
}

Comments

[sergski]

font-weight: normal; потому что

[Антон Усачев]

sergski, в данном случае это не имеет значения, потому что указана отдельная семья шрифта как 'Open Sans Bold'. Там можно хоть font-weight: thin указать и это не повлияет.

[archelon]

Посмотрите в консоли браузера, загрузились ли шрифты.
У вас как-то странно пути прописаны.

[RedSmoke_smr]

archelon, посмотрел в консоли, шрифты и написано что рендерится совсем другой шрифт, не тот что нужно. Подскажите пожалуйста, как решить данную проблему? Пути до шрифтов я проверил, все правильно

При чем ошибку выдает только для Bold а для Regular все нормально

[archelon]

RedSmoke_smr, вот это src: url('/../fonts/ точно корректный путь? я могу ошибаться, просто не встречал такого формата — то ли относительный урл, то ли абсолютный.
где расположена папка fonts относительно корня или css-файла?

Answer 1

[Антон Усачев]

Во-первых, лучше один раз указать семью и оперировать только начертанием. Типа того:

@font-face {
	font-family: 'Open Sans';
	src: url('/../fonts/OpenSans-Bold.eot');
	src: url('/../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('/../fonts/OpenSans-Bold.woff') format('woff'),
		url('/../fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/../fonts/OpenSans-Regular.eot');
	src: url('/../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		url('/../fonts/OpenSans-Regular.woff') format('woff'),
		url('/../fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

Во-вторых, стоит проверить пути до файлов шрифта.
Обычное начертание у вас отображается нормально скорее всего по причине того, что это начертание установлено в системе.

Comments

[RedSmoke_smr]

А как в CSS мне подключить нужное начертание ?

[Антон Усачев]

RedSmoke_smr, можно так:

body {
    font-family: 'Open Sans';
    font-weight: 400;
}

h2 {
    /* браузер уже знает по наследованию, что мы юзаем Open Sans normal (400), потому тут просто уточняем, что для заголовков второго уровня хотим болд */
    font-weight: 700;
}

Это для регуляра.
Если хотим болд – 700.

А так, вот стандартный список, хоть и есть у каждого шрифта свой собственный набор:
100 — тонкое начертание;
200 — сверхсветлое;
300 — светлое;
400 — нормальное (аналогично normal);
500 — среднее;
600 — полужирное;
700 — жирное (аналогично bold);
800 — сверхжирное;
900 — тяжёлое