Как правильно генерировать шрифт для сайта через fontsquirrel?

Question

[hax0r :3]

Ребят как правильно генерировать шрифты для сайта через fontsquirrel, вот если сгенерировал шрифт допустим Roboto Regular и Roboto Bold, когда их подключаешь они работают всё ок, но а вот когда ты хочешь сделать жирный шрифт у блока, пишешь font-weight: 700;, то шрифт становиться стандартным, но при этом жирным, а что бы сделать шрифт жирным Roboto приходиться писать к блоку font-family. А многие просто генерируют шрифт и пишут блоку font-weight: 700; и у них всё ок.

Answer 1

[kn1ght_t]

открой сгенерированный css-файл и напиши одинаковые названия у всех шрифтов из одного семейства и меня непосредственно уже font-style/font-weight в зависимости от названия шрифта, например:

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-bold_0.eot');
    src: url('pfbaguesanspro-bold_0.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-bold_0.woff2') format('woff2'),
         url('pfbaguesanspro-bold_0.woff') format('woff'),
         url('pfbaguesanspro-bold_0.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-light.eot');
    src: url('pfbaguesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-light.woff2') format('woff2'),
         url('pfbaguesanspro-light.woff') format('woff'),
         url('pfbaguesanspro-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-medium.eot');
    src: url('pfbaguesanspro-medium.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-medium.woff2') format('woff2'),
         url('pfbaguesanspro-medium.woff') format('woff'),
         url('pfbaguesanspro-medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'pf';
    src: url('pfbaguesanspro-regular.eot');
    src: url('pfbaguesanspro-regular.eot?#iefix') format('embedded-opentype'),
         url('pfbaguesanspro-regular.woff2') format('woff2'),
         url('pfbaguesanspro-regular.woff') format('woff'),
         url('pfbaguesanspro-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

а вообще шрифт Roboto есть в гугл фонтс, проще через него подключить
p.s. поменяй "нечего" в профиле своем на "ничего" ))

Comments

[Евгений Петров]

Я бы ещё и ttf выкинул — никому он не нужен.

[kn1ght_t]

Евгений Петров: eot для ие8, а opera mini и android 4.1 4.2, вроде как, не поддерживают woff и eot, поэтому присутствует ttf

[Евгений Петров]

kn1ght_t: А Opera Mini и ttf Не поддерживает caniuse.com/#feat=ttf

[hax0r :3]

Ахаха спасибо))

[hax0r :3]

Евгений Петров: А что если при генерации шрифта через fontsquirrel, поставить галочки только на ttf и svg?

[Евгений Петров]

hax0r :3: С какой целью?

[hax0r :3]

Евгений Петров: Просто я на хабре читал, что лучше генерировать так, со всех галочки убрать а оставить только на svg и tff, шрифт будет более сглаженным.

[Евгений Петров]

hax0r :3: Вам нужны, в первую очередь, woff и woff2, а вы будете ставить галки на svg и ttf?.. Я даже комментировать не буду.

[hax0r :3]

Евгений Петров: ок.