@svilkov87

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

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

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;
}


Буду благодарен за ответ и помощь.
  • Вопрос задан
  • 3152 просмотра
Пригласить эксперта
Ответы на вопрос 2
IIIu6ko
@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
Ответ написан
Комментировать
Serj-One
@Serj-One
i'm sexy and i know it
Похоже на проблемы с насыщенностью. Возможно, ниже в 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;     // <--
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы