Из-за шрифта как будто прыгает картинка в меню, как исправить?

Question

[olya_097]

Из-за шрифта как будто прыгает картинка в меню, как исправить?

Comments

[Ankhena]

Что значит из-за шрифта? При каких обстоятельствах прыгает?
Выложите код в песочницу.

[olya_097]

Ankhena, вот тут https://jsfiddle.net/61cgrxm2/
на планшетной версии видно

[olya_097]

Ankhena, не смотрели?

[Ankhena]

olya_097, не вижу куда прыгает. Вижу только, что на десктопе нет логотипа. Опишите, пожалуйста, как воспроизвести прыжки?
Общие комментарии:
Логотип не является элементом списка меню, он самостоятелен и позиционируется абсолютом.
Про picture: в данном случае все три варианта логотипа векторные, там не нужны png.

[olya_097]

Ankhena, при обновлении страницы прыгает


так лого ж вроде как искажается при масштабировании
разве оно подходит для свг?

делать логотипом списком меню это ошибка? или просто не рекомендуется ?

[Ankhena]

olya_097,

при обновлении страницы прыгает

Я увидела. Arial это веб безопасный шрифт, зачем вы грузите его внешним файлом, да еще в ttf?
Нестандартные шрифты сейчас достаточно загружать в woff2 и woff.
При этом делают предзагрузку и свойство font-display.

делать логотипом списком меню это ошибка? или просто не рекомендуется ?

Логотип основная часть фирменного стиля. Это самостоятельный элемент. То, что принято делать его ссылкой на главную страницу не делает его элементом меню.
Он может входить в блок nav, но не в основной список.

так лого ж вроде как искажается при масштабировании
разве оно подходит для свг?

Я не знаю в каком виде у вас макет. В оригинале это 3 svg, самый простой вид для мобильных и постепенное усложнение на планшетах и десктопах.

[olya_097]

Ankhena, а если через гугл шрифты также прыгает сайт?

к примеру в другом макете
подключаю font-family: 'Oswald', sans-serif; в css

в html

[Ankhena]

olya_097, Используйте предзагрузку для нестандартных шрифтов
<link rel="preload" href=".." as="font">
https://habr.com/company/paysto/blog/266495/