Я хочу отложить загрузку шрифтов на своем сайте, вдохновленную логикой отложенной загрузки шрифтов для Smashing Magazine.
Основная часть этого - конвертация шрифтов в base64 и подготовка вашего CSS файла. Мои шаги до сих пор:
- Выберите шрифты в Google Web Fonts и загрузите их.
- Используйте Font Squirrel Webfont Generator для преобразования загруженных файлов TTF в файл CSS со встроенными шрифтами WOFF base64 (Параметры эксперта → CSS → Кодировка Base64).
- Загрузите асинхронный файл CSS (здесь не важно).
Фрагмент CSS для Open Sans Bold:
@font-face {
font-family: 'Open Sans';
src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
font-weight: 700;
font-style: normal;
}
Проблема в том, что конвертированные шрифты выглядят совсем иначе. Посмотрите на Open Sans Bold:
Особенно обратите внимание акценты в далеко и совершенно ужасное письмо a
. Другие семейства шрифтов и варианты также выглядят очень заметно по-другому (искажения размера и формы и т.д.).
Итак, вопрос: как правильно кодировать файлы TTF из Google Web Fonts (или другого источника) в формат base64 и использовать его так, чтобы результат был идентичен исходному файлу?