Font-dislay: swap. Как избежать смещение макета?

Question

[alexsun7]

Здравствуйте.
Проблема заключается в следующем.

Задал подключение пользовательского шрифта и свойство font-display: swap

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
}

Также задал загрузку второго шрифта системного а также его масштабирование:

@font-face {
    font-family: 'Adjusted Arial';
    size-adjust: 89%; 
    src: local("Arial");
}

body {
    font-family: 'Roboto Condensed', 'Adjusted Arial', sans-serif;
}

Когда грузится второй шрифт смещение макета не происходит. Но при загрузке страницы все-равно происходит смещение (похоже на то, что шрифт не масштабируется при загрузке страницы).

В чем может быть проблема? Есть ли возможность этого избежать?

Comments

[Ankhena]

Вы используете preload для шрифтов?

[alexsun7]

Ankhena, нет

[Ankhena]

alexsun7, попробуйте, возможно, это поможет загрузить и отрисовать шрифт быстрее.

[Ankhena]

alexsun7, кстати, зачем вам старый ttf?
Современным браузерам нужен woff2. На всякий случай, для предыдущих поколений можно подгружать и просто woff.

Answer 1

[Семён Окулов]

Одним из возможных решений этой проблемы может быть использование опции font-display: optional вместо swap для пользовательского шрифта. Это позволит браузеру применять масштабирование шрифта сразу после его загрузки, даже если он еще не полностью загружен.

Вот пример кода:

@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
}

Также убедитесь, что шрифт Adjusted Arial доступен на устройствах, на которых отображается ваш сайт, и что он правильно загружается.

Однако имейте в виду, что изменение font-display может повлиять на воспринимаемую производительность сайта, поскольку оно может вызвать "сдвиг" текста после полной загрузки шрифта