--- title: О недоступности веб-шрифтов при подгрузке date: 2011-12-16T10:00 tags: [frontend] --- Лет пять назад я [писал про типографию](http://kurapov.name/rus/technology/ui/css_fontface) для web через @font-face. С того времени прошло достаточно времени, браузеры уже стали полноценно поддерживать шрифты. Для простоты и единства, вышел конструктор [Google Fonts](http://www.google.com/webfonts) и [Typekit](https://typekit.com/). По всей истории этого дела хорошо прошёлся Вадим Макеев, поэтому я сфокусируюсь на основном баге. Аж с 2009 года (а то и раньше) [был известен баг](http://remysharp.com/2009/06/23/safaris-problem-with-font-face/) многих браузеров об отображении текста без символов из-за того что css подгрузился, указал что должен использоваться какой-то шрифт, а сам шрифт (который может нехило весить) ещё грузится. В зависимости от скорости соединения возникает эффект "моргания". Проблема в том что это до сих пор не исправлено в Webkit (Safari, Chrome), поэтому вот мой уродливый хак (да, избавьтесь как только пофиксят).. Прежде всего  через jquery заставим загружаться файл шрифтов, добавив пустой элемент. `$('body').append('');` Поймать событие когда шрифт загрузится получается только таким способом. `document.onreadystatechange = function() { if (document.readyState && document.readyState=="complete"){ $('body').addClass('font_loaded'); } };` Теперь в css к стандартному шрифту прийдётся добавить дубликат.. `h1 {font-family:serif;} body.font_loaded h1{font-family:CustomFontYOuWantToUse, serif;}`На просторах интернета было замечено интересное решение, подгружать содержание шрифта сразу в css файле, используя [data:URL](http://ru.wikipedia.org/wiki/Data:_URL) `src:url(data:font/opentype;base64` ## Related - [AddHandler в Visual Basic 2005](/ru/blog/tech/frontend/addhandler-v-visual-basic-2005/) - [Datasync между браузерами](/ru/blog/tech/frontend/datasync-mezhdu-brauzerami/) - [Drag-n-drop file upload](/ru/blog/tech/frontend/drag-n-drop-file-upload/)