Как сделать мгновенное отображение шрифта при открытии скрытого блока?

Frontender

Есть блок со свойством display: none, в котором для текста используется нестандартный шрифт. При отображении этого блока - display: block, текст нужным шрифтов отображается через какие-то время. Как сделать отображение текста нужным шрифтом сразу после показа блока? Какие есть способы предварительной загрузки шрифтов?

1 ответ

Frontender

Как вы подключаете шрифт? Как вы показываете модальное окно? Как выглядит ваш код? Воспроизводима ли ваша ошибка?

Вот рабочий вариант, подключайте шрифт внутри html:

$(document).ready(function() {
  $(".fancybox").fancybox();
});
#font1 {
  font-family: 'Audiowide', cursive;
}

#font2 {
  font-family: 'Monoton', cursive;
}
<a href="#font1" class="fancybox">font1</a>
<a href="#font2" class="fancybox">font2</a>
<div id="font1" style="display:none">font1</div>
<div id="font2" style="display:none">font2</div>
Либо как было написано выше в комментариях - вызовите шрифт до открытия модального окна, например в пустом диве

licensed under cc by-sa 3.0 with attribution.