Рендер шрифта в Firefox и Chrome одинаково?

Question

[Роман]

Привет, друзья! Ранее использовал ссылку на вебфонты от гугла, но сейчас решил попробовать иначе.
Скачал этот WebFontKit
и подключил к проекту.
Вот рендер из хрома

А вот их Firefox

OS X 10.10
Я понимаю, что это нормально, но может есть грязный хак чтобы жирный шрифт был в ФФ как в хроме?
А то в макете всё выглядит миленько, а как в фф смотришь на жирноту, то плохеет мне)

Answer 1

[Денис Инешин]

А вы точно скачали все варианты шрифта? Для внешних шрифтов нужно подключить как минимум 4 варианта: regular, bold, italic, bold italic. Иначе жирность и курсив будет сделан инструментами браузера, что далеко не всегда корректно.

Comments

[Роман]

Скачал все, подключил только bold, medium и regular. DevTool в FF если навести на Bold пишет это
i.imgur.com/7ZXclcR.png
вроде всё чётенько

[Денис Инешин]

Роман: да, только подключенный болд не нужно оборачивать в font-weight: bold

[Роман]

Денис Инешин: спасибо, вы навели меня на правую мысль. Я вообще не во что не оборачивал.

в font.css я объявил
@font-face {
font-family: 'robotobold';
src: url('Roboto-Bold-webfont.eot');
src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Bold-webfont.woff') format('woff'),
url('Roboto-Bold-webfont.ttf') format('truetype'),
url('Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: normal;
font-style: normal;
}
и думал, что в style.css будет достаточно
b {
line-height: 20px;
font-family: 'robotobold', sans-serif;
color: #336699;
}
Добавил font-weight: normal; и все стало нормально.
Спасибо, получил Level Up.

[Денис Инешин]

Роман: нз

[Сергей delphinpro]

Что за дурацкая привычка так шрифты подключать. Ведь не зря же в fon-face усть два параметра bold и italic!

@font-face {
font-family: 'Roboto';/* обращаем сюда свой внимание */
src: url('Roboto-Bold-webfont.eot'); /* ... */
font-weight: bold; /* обращаем сюда свой внимание */
font-style: normal;
}
@font-face {
font-family: 'Roboto';/* обращаем сюда свой внимание */
src: url('Roboto-webfont.eot'); /* ... */
font-weight: normal; /* обращаем сюда свой внимание */
font-style: normal;
}

и так далее для все вариантов
А уже в CSS привычно работаем как с обычным шрифтом.

b {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

Подключайте шрифты правильно :)

Answer 2

[Сергей Иванов]

может поможет

Comments

[Роман]

В вашем варианте я увидел интересную идею с порядком размещения .svg файла выше над остальными. Но это не помогло.