Почему Firefox не «видит» шрифт Roboto?

Question

[svilkov87]

Добрый день!
После тестирования проекта в FF, обнаружилась проблема - не отображаются шрифты Roboto.
Я бы даже сказал, что отображаются, но выглядят уродливо:


Font-face секция:

@font-face {
	font-family: "RobotoRegular";
	src: url("../fonts/RobotoRegular/RobotoRegular.eot");
	src: url("../fonts/RobotoRegular/RobotoRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoRegular/RobotoRegular.woff") format("woff"),
	url("../fonts/RobotoRegular/RobotoRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoLight"; */
@font-face {
	font-family: "RobotoLight";
	src: url("../fonts/RobotoLight/RobotoLight.eot");
	src: url("../fonts/RobotoLight/RobotoLight.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoLight/RobotoLight.woff") format("woff"),
	url("../fonts/RobotoLight/RobotoLight.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoMedium"; */
@font-face {
	font-family: "RobotoMedium";
	src: url("../fonts/RobotoMedium/RobotoMedium.eot");
	src: url("../fonts/RobotoMedium/RobotoMedium.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoMedium/RobotoMedium.woff") format("woff"),
	url("../fonts/RobotoMedium/RobotoMedium.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoBold"; */
@font-face {
	font-family: "RobotoBold";
	src: url("../fonts/RobotoBold/RobotoBold.eot");
	src: url("../fonts/RobotoBold/RobotoBold.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoBold/RobotoBold.woff") format("woff"),
	url("../fonts/RobotoBold/RobotoBold.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "NautilusPompiliusRegular"; */
@font-face {
	font-family: "NautilusPompiliusRegular";
	src: url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.eot");
	src: url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.woff") format("woff"),
	url("../fonts/NautilusPompiliusRegular/NautilusPompiliusRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoCondensedRegular"; */
@font-face {
	font-family: "RobotoCondensedRegular";
	src: url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.eot");
	src: url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.woff") format("woff"),
	url("../fonts/RobotoCondensedRegular/RobotoCondensedRegular.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoCondensedLight"; */
@font-face {
	font-family: "RobotoCondensedLight";
	src: url("../fonts/RobotoCondensedLight/RobotoCondensedLight.eot");
	src: url("../fonts/RobotoCondensedLight/RobotoCondensedLight.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoCondensedLight/RobotoCondensedLight.woff") format("woff"),
	url("../fonts/RobotoCondensedLight/RobotoCondensedLight.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}
/* font-family: "RobotoCondensedBold"; */
@font-face {
	font-family: "RobotoCondensedBold";
	src: url("../fonts/RobotoCondensedBold/RobotoCondensedBold.eot");
	src: url("../fonts/RobotoCondensedBold/RobotoCondensedBold.eot?#iefix")format("embedded-opentype"),
	url("../fonts/RobotoCondensedBold/RobotoCondensedBold.woff") format("woff"),
	url("../fonts/RobotoCondensedBold/RobotoCondensedBold.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
}

Буду благодарен за ответ и помощь.

Comments

[Ярослав Иванов]

Кэш

[svilkov87]

Ярослав Иванов: А выход есть какой-нибудь?

[Ярослав Иванов]

svilkov87: сбросить кэш?

[svilkov87]

Эмм... а как, не подскажете?

[svilkov87]

Ярослав Иванов: я имел ввиду не в настройках браузера...

[Ярослав Иванов]

svilkov87: а в браузере сбрасывали?

[svilkov87]

Ярослав Иванов: да, сбрасывал. но ничего не поменялось.

Answer 1

[IIIu6ko]

Лучше вот так подключай шрифты:

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}

Если необходимо bold ещё подключить то меняешь url и font-weight, а название оставляешь тоже.

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.woff2') format('woff2'),
           url('Roboto-Regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-bold.woff2') format('woff2'),
           url('Roboto-bold.woff') format('woff');
    font-weight: bold;
}

Ну и в самих стилях пишешь вот так

// Если нужен bold
h1 {
    font-family: Roboto;
    font-weight: bold;
}
// Если нужен Regular
h1 {
    font-family: Roboto;
    font-weight: normal; // Либо можно не писать т.к. по умолчанию стоит
}

Собственно все остальные форматы кроме woff и woff2 можешь убрать. Можно ещё добавить ttf если нужна поддержка старых Android.

Вот кроссбраузерность woff caniuse.com/#feat=woff
Если уж так нужен ie8, то можно ещё eot подключить, но вряд ли оно того стоит.
Другие форматы подключаются также в src через запятую, после последнего ; не забудь.

Вот здесь можешь почитать поподробнее про подключение
nicothin.pro/page/web-fonts

woff2 я здесь брал
https://github.com/FontFaceKit/roboto

Answer 2

[Serj-One]

Похоже на проблемы с насыщенностью. Возможно, ниже в css указаны насыщенности, отличные от normal, и браузер сам подгоняет. Попробуй подключать шрифт правильно, т.е. указывая для всех начертаний единое имя, но соответствующие font-weight.

@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoRegular/RobotoRegular.eot");
  ...
  font-style: normal;
  font-weight: normal;     // <--
}
@font-face {
  font-family: "Roboto";     // <--
  src: url("../fonts/RobotoLight/RobotoLight.eot");
  ...
  font-style: normal;
  font-weight: 300;     // <--
}