Источник: http://habrahabr.ru/post/180615/
Автор: SVGen

Задача

ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства font-family этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.
Эффект известен также как FOUT — так его назвал Пол Айриш.

При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.

На эту тему здесь была такая статья. В ней последствия ВОШ рекомендовалось нивелировать грамотной игрой со шрифтами. К сожалению, иногда подключаются такие шрифты, которые слишком отличаются по характеристикам от стандартных.

Решение

Чтобы устранить ВОШ, я решил указывать шрифт в основном файле стилей при помощи data:uri, чтобы шрифт отображался сразу, вместе со страницей.

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

Шрифты в eot наиболее лёгкие, но поддерживаются только ИЕ.
Шрифты в ttf и svg тяжелы, иногда — конечно, это зависит от шрифта — занимающие в два раза больше места, чем eot и woff. В моей ситуации я выбрал woff, этот формат поддерживается большинством браузеров наших посетителей.
Ещё есть браузеры, которые woff не понимают, поэтому указываются альтернативы для них.

ИЕ версии 8 и старше не понимают шрифты в woff, им нужен eot. В то же время, ИЕ8 не понимает файлы в data:uri тяжелее 32КБ, а более старшие версии не воспринимают совсем никакие, поэтому в отдельном файле стилей для них можно просто указать ссылки на файлы шрифтов. Чтобы эти браузеры не загружали ненужное, подключение шрифта в woff и в других форматах выделено в отдельный файл стилей и отделено условным комментарием.

Также, есть мнение, что под Вин в Хроме svg-шрифты выглядят лучше других, но, мне кажется, это дело вкуса. Шрифт в этом формате лучше других сжимается при помощи gzip, но не поддерживается Файрфоксами и ИЕ.

Таким образом, подгружать шрифты можно при помощи следующего кода:

<!-- подключение файлов стилей -->
<!--[if lte IE 8]>
  <link rel="stylesheet" href="fonts_ie.css" media="all">
<![endif]-->
<!--[if gt IE 8]><!-->
  <link rel="stylesheet" href="fonts.css" media="all">
<!--<![endif]-->
 
<link rel="stylesheet" href="main.css" media="all">

/* fonts_ie.css */
@font-face {
    font-family: 'PT Sans Narrow';
    font-style: italic;
    font-weight: bold;
    src: url('PTS76F_W.eot');
}

/* fonts.css */
@font-face {
    font-family: 'PT Sans Narrow';
    font-style: italic;
    font-weight: bold;
    font-variant: normal;
    src: url('data:application/x-font-woff;base64,d09GRgABAAAA...aCw0AAA==') format('woff'),
         url('PTN77F_W.svg#PTSans-NarrowBold') format('svg'),
         url('PTN77F_W.ttf') format('truetype');
}

/* main.css */
body {
    font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    font-style: italic;
}

При использовании этого способа ВОШ остаётся только в неподдерживающих woff-шрифты, планомерно теряющих пользователей браузерах, самый распространённый из которых на данный момент — ИЕ8.

На этой странице шрифт подключен традиционно.
Здесь шрифт закодирован.
Эффект заметней на медленном соединении.

Особенности

Стоит осознать, что при использовании такой техники остаются браузеры, которые не понимают шрифты в woff, но которым придётся их загружать. Тут уже играет роль количество посетителей с такими браузерами и продуктивность их посещений. В моей ситуации оказалось, что лучше устранить ВОШ.

Шрифт всё равно будет скачиваться, даже если установлен локально. Это сделано, чтобы предотвратить конфликты между начертаниями; будет скачиваться такое, какое нужно.
Страница не будет отрисовываться, пока файл стилей со шрифтом не скачается.

Также отмечу, что способ не подойдёт для шрифтов с лицензией, не позволяющей загружать их при помощи data:uri.

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

Дополнительная информация

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

Немного об особенностях подключения.