Как сделать так, что бы при загрузке страницы из-за загружаемых шрифтов не прыгал контент?

Question

[Артем Комаров]

Подключаю нестандартный шрифт при помощи @font-face. При загрузке страницы происходит следующее: html и css уже загрузились а сам шрифт еще загружается. После того, как шрифт загрузился всё становится как надо, но происходит визуальный скачек. Как от этого избавиться?

Answer 1

[Павел Кононенко]

Вежливо попросить пользователя установить данный шрифт себе в систему.

Answer 2

[4ikist]

Использовать безопасный шрифт максимально схожий с нестандартным.
Нестандартный шрифт загружать используя js.
В момент успешной загрузки добавить к элементу класс, например (font-loaded).
В стилях этому классу присвоить нестандартный шрифт.

Answer 3

[Rodion Svetlitskiy]

Используйте Typekit или Google Fonts, если конечно там будет необходимый вам шрифт.

Answer 4

[Дмитрий Шинкарь]

А красивенькая и популярная Verdana - уже не круто?

ЗЫ. про Google Fonts - совет дельный.

ЗЗЫ. Возможно вариант прописать какой нибудь пре-лоад и за одно кешировать все это дело... Но смотря сколько ваши чудо-шрифты завесят...

Answer 5

[Александр Зонов]

Попробуйте блокам которые сильно меняют свои размеры явно задать высоту и ширину, которую они приобретают при загрузке нужных шрифтов. Да, нудно и кропотливо, да, не всегда помогает, но может снизить остроту проблемы.