Олег!

Недавно я делал сайт с заголовками, набранными кастомным шрифтом. Мне тоже не понравилось, как ведёт себя сайт во время загрузки — в одном браузере скачки шрифтов, в другом пустота вместо текста.

В Гугле попадались методы, помогающие побороть только дыры — например, такой — показываем текст стандартным шрифтом, грузим специальный шрифт асинхронно, а при его загрузке уже расставляем классы, включающие это начертание у определённых блоков. Не то!

Текст нужно показывать сразу. Я уже хотел убеждать дизайнеров отказаться от красивых заголовков — технология слишком сырая. Но решил пересмотреть код подключения шрифта, и увидел что-то вроде этого:

@font-face {
  font-family: 'Super Font';
  src: url('super-font.eot');
  src: url('super-font.eot?#iefix')
           format('embedded-opentype'),
       url('super-font.woff') format('woff'),
       url('super-font.ttf') format('truetype'),
       url('super-font.svg#superfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

• Сколько форматов — EOT, WOFF, TTF, SVG! Я проверил таблицы совместимости и решил оставить только два формата:
• WOFF — для современных браузеров, включая ИЕ 9 и 10;
• EOT — для ИЕ 8 и ниже.

Как дальше развивалась моя мысль — не помню, что-то щёлкнуло :-) WOFF я сконвертировал в base64 и вставил прямо в ЦСС — текст начал показываться вместе со всем сайтом моментально:

@font-face {
  font-family: 'Super Font';
  src: url(data:application/x-font-woff;...) format('woff');
  font-weight: normal;
  font-style: normal;
}

EOT для ИЕ подключил ссылкой на файл, как в первом примере, а скачки в старых версиях списал на грациозную деградацию.

@font-face {
  font-family: 'Super Font';
  src: font-url('super-font.eot');
  font-weight: normal;
  font-style: normal;
}

Очень важно разделить подключение эти двух форматов на два файла и не грузить в ИЕ несколько сот лишних килобайт ЦСС.