О недоступности веб-шрифтов при подгрузке

Лет пять назад я писал про типографию для web через @font-face. С того времени прошло достаточно времени, браузеры уже стали полноценно поддерживать шрифты. Для простоты и единства, вышел конструктор Google Fonts и Typekit. По всей истории этого дела хорошо прошёлся Вадим Макеев, поэтому я сфокусируюсь на основном баге.

Аж с 2009 года (а то и раньше) был известен баг многих браузеров об отображении текста без символов из-за того что css подгрузился, указал что должен использоваться какой-то шрифт, а сам шрифт (который может нехило весить) ещё грузится. В зависимости от скорости соединения возникает эффект "моргания". Проблема в том что это до сих пор не исправлено в Webkit (Safari, Chrome), поэтому вот мой уродливый хак (да, избавьтесь как только пофиксят)..

Прежде всего  через jquery заставим загружаться файл шрифтов, добавив пустой элемент.

$('body').append('<span style="font-family: \'CustomFontYouWantToUse\';"></span>');

Поймать событие когда шрифт загрузится получается только таким способом.

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 src:url(data:font/opentype;base64