Сегодня веб-технология позволяет дизайнеру и верстальщику внедрять разнообразные шрифты в сайт. И это здорово, так как можно сосредоточиться на типографике и придать сайту изюминку. Однако использование @font-face для шрифтов имеет свой небольшой недостаток, особенно он заметен в хромиусподобных браузерах — это мерцание шрифта.
Дело в том, что пока грузится шрифт текст отрисовывается запасным системным, например Arial, и после этого заменяется на необходимый нам из @font-face.
В Firefox мерцание незаметно, но в Chrome и хромиусподобных браузерах, будь то Opera, Yandex или Vivaldi этот момент очень заметен, особенно это видно в мобильных браузерах.
Сегодня можно найти разные варианты как убрать мерцание, но все они основываются на идеи поместить в локальное хранилище шрифт и из него извлекать, тем самым ускоряя сайт и убирая раздражитель.
На Github есть интересная разработка localFont и одноименный сайт на ее базе https://jaicab.com/localFont/. Воспользовавшись этим инструментом мы превращаем наш шрифт в base64-код, который храниться непосредственно в файле CSS, сохраняемый в папку шаблона Joomla fonts.
Дабы ускорить внедрение этой технологии достаточно между тегами <head> вставить следующий код и прописать путь к файлу font.css.
<?php
$fontface = '/templates/MY_TEMPLATE/fonts/font.css';
?>
<script type="text/javascript">!function(){"use strict";function e(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)}function t(e){return window.localStorage&&localStorage.font_css_cache&&localStorage.font_css_cache_file===e}function n(){if(window.localStorage&&window.XMLHttpRequest)if(t(o))c(localStorage.font_css_cache);else{var n=new XMLHttpRequest;n.open("GET",o,!0),e(n,"load",function(){4===n.readyState&&(c(n.responseText),localStorage.font_css_cache=n.responseText,localStorage.font_css_cache_file=o)}),n.send()}else{var a=document.createElement("link");a.href=o,a.rel="stylesheet",a.type="text/css",document.getElementsByTagName("head")[0].appendChild(a),document.cookie="font_css_cache"}}function c(e){var t=document.createElement("style");t.innerHTML=e,document.getElementsByTagName("head")[0].appendChild(t)}var o="<?php echo $fontface; ?>";window.localStorage&&localStorage.font_css_cache||document.cookie.indexOf("font_css_cache")>-1?n():e(window,"load",n)}();</script><noscript><link rel="stylesheet" href="/<?php echo $fontface; ?>"></noscript>
Следует учесть, что в наш файл необходимо добавить все шрифты, которые вы используете в проекте.
Если же используете иконочные шрифты на подобии Font Awesome, то их так же добавляем.
Не пугайтесь, что файл font.css разрастается до 100-200 кб, так как он будет загружен лишь один раз и помещен в localStorage (локальное хранилище).
Для каждого шрифта @font-face я добавляю один параметр в своих проектах — это свойство font-display: swap; которое контролирует задержку. Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят. Свойство swap устанавливает период блокировки в 0 секунд и бесконечный период замены. А это означает, что браузер сразу отрисовывает текст безопасным шрифтом.
Так же следует знать, что кодирование шрифтов в таблицу стилей не поддерживается некоторыми старыми браузерами, поэтому мы можем применить старый прием:
@font-face {
font-family: 'MyFont';
src: url('/templates/MY_TEMPLATE/fonts/font.eot');
src: url('/templates/MY_TEMPLATE/fonts/font.eot?#iefix') format('embedded-opentype'),
url(data:application/font-woff;charset=utf-8;base64, [тут закодированный код шрифта] ) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Я добавил поддержку для IE с помощью шрифта font.eot и для старых версий браузеров, которые не понимают шрифт woff, например Opera.
В файл font.css также можно добавить в закодированном виде шрифты woff2 и ttf.
Многие наверняка спросят, а что если у пользователя отключена поддержка javascript? А для таких случаев в нашем скрипте в самом конце у нас добавлен код, который будет отрабатываться при выключенных скриптах:
<noscript><link rel="stylesheet" href="/<?php echo $fontface; ?>"></noscript>
В последних своих крупных проектах я использую этот метод и могу сказать, что он работает и визуально сайт грузиться намного быстрее.
Приятной вам разработки
