Внезапная проблема с google fonts в google chrome - кейс из практики Клондайк

Статья, описывает проблему из моей практики верстальщика студии Клондайк при вёрстке страницы раздела «анимация и мультимедиа» на сайте студии.

Недавно обнаружил неожиданную проблему с некорректным отображением (вернее «не отображением» вовсе) нестандартных шрифтов при использовании технологии google fonts. Как это выглядит можно посмотреть на нижеприведенном скрине.

google_fonts_bug

Как видно — при том, что место под текст вроде как отведено верно сами шрифты не рендерятся.

Сначала было решил, что это какая-то моя персональная проблема, потому как это произошло внезапно и с ранее нормально отображавшимся сайтом. Порылся в настройках хрома, даже переустановил его. Не помогло. Потом проверил сайт на других компьютерах и встретился с той же проблемой. Нашел статью в интернетах, в которой говорится, что в 33й версии хрома ряд пользователей сталкиваются с подобной проблемой (web fonts may not be displayed until the user interacts with the browser window (scrolling or clicking), causing the browser to redraw the page).

Однако вместе с тем, обнаружил что ряд сайтов в интернетах с гуглфонтс продолжает отображаться корректно, что означало что, в моей верстке есть что-то что приводит к неверной работе шрифтов в последней версии Хрома. Методом исключения нашел что причина тому скрипт holder.js — скрипт генерирует изображения нужных размеров (см. тут ), что бывает крайне удобно в момент создания верстки. Вероятно скрипт каким-то образом конфликтует с скриптами отвечающими за рендер нестандартных шрифтов, каким именно образом разбираться не стал. Думаю, кроме этого скрипта есть и другие, которые могут вызывать данный баг. На всех ранее сверстанных сайтах удалю скрипт из файла с подключаемыми плагинами, благо использую его не так давно. Ну и скрин сайта сразу после удаления скрипта.

google_fonts_fixed

Оставить комментарий