Как настроить наследование доп. шрифтов при использовании font-display: swap?

Question

[weranda]

Приветствую.
В стилях прописана вот такая конструкция:

body{
    font-family: 'ubuntu400',Arial,sans-serif;
    ...
}

@font-face {
    font-family: "ubuntu400";
    src: url("font/ubuntu400.eot");
    src: url("font/ubuntu400.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu400.woff2") format("woff2"),
        url("font/ubuntu400.woff") format("woff"),
        url("font/ubuntu400.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ubuntu500";
    src: url("font/ubuntu500.eot");
    src: url("font/ubuntu500.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu500.woff2") format("woff2"),
        url("font/ubuntu500.woff") format("woff"),
        url("font/ubuntu500.ttf") format("truetype");
    font-display: swap;
}

Если я добавлю заголовку страницы font-family: ubuntu500, тогда при загрузке страницы заголовок не будет отображен/подменен дополнительным системным шрифтом до загрузки шрифта и будет отображен встроенным в браузер стилем вот так:

А по логике должен отображаться шрифтом Arial, вот так:

И только потом локальным шрифтом (после того, как он подгрузится):


Я подозреваю, что это связано с тем, что я не указал для заголовка дополнительный шрифт. Правда ли это? Расскажите. Разве не должен выбираться шрифт из селектора body автоматически? Надо ли для любых элементов, для которых я прописываю конкретный шрифт (ubuntu500), в обязательном порядке прописывать и запасные шрифты? Если это так, то в моем файле примерно 40 мест, где указан конкретный шрифт для конкретных элементов и добавлять к каждой записи набор запасных шрифтов — это на пустом месте раздувать файл. Какие есть варианты для этого случая:

1. В любом случае указывать запасные шрифты для каждого элемента, где указан конкретный шрифт.
   
2. Что-то другое.
   

Comments

[Тимур Худиев]

И вы немного неправильно подключили шрифты. Не нужно для каждого начертания придумывать новое имя шрифта. Достаточно для одного семейства использовать одно название, а начертание устанавливать с помощью свойства
font-weight: 500

[weranda]

Тимур Худиев, Серьезно? Пример привести можете конкретный? Не знал про такое.

[Тимур Худиев]

@font-face {
    font-family: "ubuntu";
    src: url("font/ubuntu400.eot");
    src: url("font/ubuntu400.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu400.woff2") format("woff2"),
        url("font/ubuntu400.woff") format("woff"),
        url("font/ubuntu400.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "ubuntu";
    src: url("font/ubuntu500.eot");
    src: url("font/ubuntu500.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu500.woff2") format("woff2"),
        url("font/ubuntu500.woff") format("woff"),
        url("font/ubuntu500.ttf") format("truetype");
        font-style: normal;
        font-weight: 500;
        font-display: swap;
}

Использование:

.element {
    font-weight: 500;
}

Применится полужирный

[weranda]

Тимур Худиев, тогда у меня все жирным отображется (ubuntu500).

[Тимур Худиев]

А для body что прописано?

[weranda]

Тимур Худиев, Если отталкиваться от вашего примера, то ubuntu, arial.

[Тимур Худиев]

body{
    font-family: 'ubuntu', Arial, sans-serif;
    font-weight: normal;
}

А далее, там где нужно что бы шрифт был полужирный, применяете font-weight: 500; Прописывать название шрифта в данном случае нет необходимости.

[weranda]

Тимур Худиев, Вижу, поправили в примере выше: font-weight: 500;
Интересно, а по какой логике подцепляется к тексту шрифт — если не указана размерность font-weight, тогда браузер берет font-weight: normal; или font-weight: 400; Так получается?

[weranda]

weranda, Ну, если все так, то респект вам за такую неизвестную мне доселе особенность встраивания шрифтов!

[Тимур Худиев]

Можете на досуге тут глянуть о шрифтах

[weranda]

Тимур Худиев, Посмотрю сегодня вечерком) Спасибо еще раз.

Answer 1

[Тимур Худиев]

Везде, где указываете название шрифта, который будет применен, нужно прописывать запасной