Как работает font-face?

Question

[andreystrelkov]

Добрый день, помогите пожалуйста до конца понять font-face
Имеется шрифт здесь
и имеется здесь

И также имеется сайт на котором используется этот шрифт но с Google Fonts, однако на гугле шрифт только на латинице, а мне нужно кириллицу - поэтому я гружу в каталог сайта с первой ссылки шрифт и вставляю уже выданный код css в свой стайл.

Однако беда, сайт заточен под гугл фонтс, а именно имя шрифта одно Merriweather и в стилях сайта везде он используется под одним и менем и с разными настройками стиля и толщины

А по первой ссылке всё как то иначе, там на каждый стиль своё имя шрифта

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

Так будет работать?

Answer 1

[Кирилл Туровников]

Да вы правильно понимаете, просто указываете одно имя шрифта и ссылки на шрифты соответствующего написания, например:

@font-face{
    font-family: 'Merriweather';
    src:url();
    ...
    font-weight: 300;
    font-style: normal;
}

Answer 2

[Мак Алексей]

Стили и font-family не связаны, их можно использовать независимо, однако, для шрифта могут быть определены weigh.

p {
    font-family: "Times New Roman", Georgia, Serif;
}

В данном случае выбирается Times New Roman если он доступен, если нет - Georgia, и наконец если недоступны оба - Serif.
Недоступен шрифт может бы по многим причинам, недоступен файл, нед поддержки браузером и тп.
www.w3schools.com/cssref/css3_pr_font-face_rule.asp

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

В данном примере font-face "создаёт" новый шрифт Helvetica Neue Bold, альтернативное написание HelveticaNeue-Bold и добавляет их к семье MyHelvetica. Поскольку этот шрифт - жирный, то указан font-weight.

Очевидно, что на сайте с кириллицей используют генератор CSS:

/* Код для подключения шрифта в /css/stylename.css */

/* font-family: "MerriweatherRegular"; */
@font-face {
    font-family: "MerriweatherRegular";
    src: url("../fonts/MerriweatherRegular/MerriweatherRegular.eot");
    src: url("../fonts/MerriweatherRegular/MerriweatherRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MerriweatherRegular/MerriweatherRegular.woff") format("woff"),
    url("../fonts/MerriweatherRegular/MerriweatherRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "MerriweatherBold"; */
@font-face {
    font-family: "MerriweatherBold";
    src: url("../fonts/MerriweatherBold/MerriweatherBold.eot");
    src: url("../fonts/MerriweatherBold/MerriweatherBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MerriweatherBold/MerriweatherBold.woff") format("woff"),
    url("../fonts/MerriweatherBold/MerriweatherBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
...

Грамотнее было бы написать такой код:

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/MerriweatherRegular/MerriweatherRegular.eot");
    src: url("../fonts/MerriweatherRegular/MerriweatherRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MerriweatherRegular/MerriweatherRegular.woff") format("woff"),
    url("../fonts/MerriweatherRegular/MerriweatherRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "Merriweather";
    src: url("../fonts/MerriweatherBold/MerriweatherBold.eot");
    src: url("../fonts/MerriweatherBold/MerriweatherBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MerriweatherBold/MerriweatherBold.woff") format("woff"),
    url("../fonts/MerriweatherBold/MerriweatherBold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: "Merriweather";
    src: url("../fonts/MerriweatherItalic/MerriweatherItalic.eot");
    src: url("../fonts/MerriweatherItalic/MerriweatherItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/MerriweatherItalic/MerriweatherItalic.woff") format("woff"),
    url("../fonts/MerriweatherItalic/MerriweatherItalic.ttf") format("truetype");
    font-style: italic;
    font-weight: normal;
}
...

То-есть одна семья но разные предопределённые стили и веса.

p.s.: на старых версиях Safari под iOS такое переопределение может скрашить браузер если используется SVG

Comments

[Кирилл Туровников]

Вы не совсем правильно поняли вопрос, на google fonts нет кириллицы, и пытаются подключить этот же шрифт но с кириллицей локально.

[Мак Алексей]

Перечитал. Мой косяк.