Избегайте задержки загрузки шрифта

Ответ 1

Вы поднимаете две отдельные проблемы.

Задержка при загрузке фактических файлов шрифтов по существу неизбежна, хотя вы можете помочь, не включая ничего, что вам действительно не нужно, чтобы минимизировать размер файла в целом. В зависимости от того, какой сервис/метод вы используете, это может привести к уменьшению количества наборов символов (/languages), а также весов и стилей.

Что касается вспышки незакрепленного текста, то это неизбежно, частично из-за проблемы с загрузкой выше. Но как только вы уменьшите это как можно больше, вы должны реализовать загрузчик шрифтов, чтобы лучше контролировать эту часть. Здесь TypeKit (open-sourced) реализация и краткое пояснительное сообщение в блоге. Пример внизу конкретно относится к FOUT; вы можете в значительной степени просто вставить его в свой собственный код.
Вот некоторая информация из FontDeck об использовании Google-загрузчика с их сервисом, что также приведет к тому, что оно будет использоваться для службы Google WebFonts.

Любая другая услуга, вам придется начинать собственное исследование, но это общие понятия. С помощью этих инструментов вы можете использовать несколько сценариев и CSS-правил, чтобы скрыть затронутый текст до тех пор, пока шрифты не будут готовы к презентации, среди некоторых других применений. Это не совсем идея, но, по крайней мере, предотвращает FOUT. Как только прошлое за начальное время, кеш браузера должен взять на себя и сделать его в значительной степени спорным.

Ответ 2

A) Загрузите шрифты, правильно настроив Cache-Control и Content-Type:

Cache-Control:public, max-age=15552000
Content-Type:application/x-font-woff;charset=UTF-8 (differs for other font files)

B) Избегайте https для заголовка Vary. Только установите Accet-Encoding.  Vary: https разрывает загрузку IE.

Vary:Accept-Encoding

https://github.com/typekit/webfontloader

C) A и B должны работать отлично после первого запроса, когда браузер уже загрузил шрифт. Если этого недостаточно, попробуйте Web Font Loader.