Сегодня веб-технология позволяет дизайнеру и верстальщику внедрять разнообразные шрифты в сайт. И это здорово, так как можно сосредоточиться на типографике и придать сайту изюминку. Однако использование @font-face для шрифтов имеет свой небольшой недостаток, особенно он заметен в хромиусподобных браузерах — это мерцание шрифта.
Дело в том, что пока грузится шрифт текст отрисовывается запасным системным, например Arial, и после этого заменяется на необходимый нам из @font-face.
В Firefox мерцание незаметно, но в Chrome и хромиусподобных браузерах, будь то Opera, Yandex или Vivaldi этот момент очень заметен, особенно это видно в мобильных браузерах.
Сегодня можно найти разные варианты как убрать мерцание, но все они основываются на идеи поместить в локальное хранилище шрифт и из него извлекать, тем самым ускоряя сайт и убирая раздражитель.
На Github есть интересная разработка localFont и одноименный сайт на ее базе https://jaicab.com/localFont/. Воспользовавшись этим инструментом мы превращаем наш шрифт в base64-код, который храниться непосредственно в файле CSS, сохраняемый в папку шаблона Joomla fonts.
Дабы ускорить внедрение этой технологии достаточно между тегами <head> вставить следующий код и прописать путь к файлу font.css.
Следует учесть, что в наш файл необходимо добавить все шрифты, которые вы используете в проекте.
Если же используете иконочные шрифты на подобии Font Awesome, то их так же добавляем.
Не пугайтесь, что файл font.css разрастается до 100-200 кб, так как он будет загружен лишь один раз и помещен в localStorage (локальное хранилище).
Для каждого шрифта @font-face я добавляю один параметр в своих проектах — это свойство font-display: swap; которое контролирует задержку. Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят. Свойство swap устанавливает период блокировки в 0 секунд и бесконечный период замены. А это означает, что браузер сразу отрисовывает текст безопасным шрифтом.
Так же следует знать, что кодирование шрифтов в таблицу стилей не поддерживается некоторыми старыми браузерами, поэтому мы можем применить старый прием:
Я добавил поддержку для IE с помощью шрифта font.eot и для старых версий браузеров, которые не понимают шрифт woff, например Opera.
В файл font.css также можно добавить в закодированном виде шрифты woff2 и ttf.
Многие наверняка спросят, а что если у пользователя отключена поддержка javascript? А для таких случаев в нашем скрипте в самом конце у нас добавлен код, который будет отрабатываться при выключенных скриптах:
В последних своих крупных проектах я использую этот метод и могу сказать, что он работает и визуально сайт грузиться намного быстрее.
Приятной вам разработки
