Как правильно подключать шрифты через font-face?

Question

[Mak354]

В общем, есть макет, в нем разные под шрифты одного шрифта. например Roboto Bold, Roboto Regular и тд, можно ли как то подключить их все в одном правиле font-face и чтоб у них было одно название? А то как то неразумно для каждого шрифта делать свой font-face, свое название. как лучше и правильнее подключать, опишите пожалуйста.

Answer 1

[Антон Спирин]

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(roboto100Url);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url(roboto200Url);
}

/* ... */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url(roboto900Url);
}

Comments

[Mak354]

а если я например хочу использовать bold, в css свойстве мне нужно написать название шрифта и font-weight: 700? Тогда кажется смысла нет в font-face определять font-weight, ведь ты его сам определишь какой нужен будет, не так?

[Антон Спирин]

Mak354, правильно будет так:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src: url(robotoNormalUrl);
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    src: url(robotoBoldUrl);
}

Answer 2

[dsmaslov]

Лучшая практика — сначала поискать шрифт на самом компьютере пользователя, чтобы его не загружать повторно и не привлекать дополнительные ресурсы. Делается это, например, так:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}