Как правильно подключать @font-face?

Question

[Bestolkovy]

Здравствуйте!

Скажите, пожалуйста, какой из трёх вариантов подключения шрифтов, является правильным?

Вариант 1:

@font-face {

    font-family: "Font name";

    src: url('font-webfont.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;

}

p {

    font-family: "Font name";
    font-weight: 400;

}

Вариант 2:

@font-face {

    font-family: "Font name";

    src: url('font-webfont.woff2') format('woff2');

    font-weight: 400;
    font-style: normal;

}

p {

    font-family: "Font name";
    font-weight: normal;

}

Вариант 3:

@font-face {

    font-family: "Font name";

    src: url('font-webfont.woff2') format('woff2');

    font-weight: normal;
    font-style: normal;

}

p {

    font-family: "Font name";
    font-weight: normal;

}

Answer 1

[Алекс Глебов]

https://developers.google.com/web/fundamentals/per...

Answer 2

[Сергей Тутуков]

Смотря сколько жирностей шрифта тебе нужно. Что я имею ввиду:

Если тебе нужно 400, 500, 700 и 900, то в @font-face нужно это указать.
А если тебе нужен только один 500, то можно написать

@font-face {
    font-family: "Font name";
    ...
    font-weight: normal;
}

Answer 3

[Евгений Кузовлев]

Это все одно и тоже, разницы между "normal" и "400" нет