Шрифт в Base64

Как конвертировать шрифт в Base64

1. Перетащите файл .woff2, .woff, .ttf или .otf в поле или выберите его через диалог.
2. В списке Формат вывода уже выбран вариант CSS @font-face. Если правило вы пишете сами, выберите Data URI или Чистый Base64.
3. Нажмите Скопировать результат и вставьте его в таблицу стилей.

Для файла Inter-Bold.woff2 результат выглядит так (данные сокращены):

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

Имя в font-family берётся из имени файла: расширение отбрасывается, а все символы, кроме букв, цифр, пробелов, - и _, заменяются пробелами. Переименуйте его в имя семейства, которое используется в вашем CSS, и добавьте font-weight и font-style, если встраиваете несколько начертаний одного семейства.

Подсказки format() и MIME-типы

Подсказка format() позволяет браузеру пропустить источники, которые он не умеет использовать, не скачивая их. Когда встроенный источник один, это не так важно, но если браузер не узнает подсказку, он всё равно пропустит источник. Инструмент выводит подсказку из MIME-типа, который сообщает браузер, а некоторые системы отдают для шрифтов необычные типы. Если у OTF получилось format("truetype"), исправьте на opentype.

WOFF2 с шрифтом TrueType внутри начинается с d09GMgABAAA, а с контурами CFF – с d09GMk9UVE8.

Встроенные шрифты должны быть маленькими

Base64 на треть больше файла шрифта и к тому же находится внутри CSS, который блокирует отрисовку. В тесте иконочный шрифт WOFF2 размером 77 160 байт дал 102 880 символов Base64, и всё это нужно скачать, прежде чем на странице появится хоть что-то.

Чтобы встраивание того стоило:

• Используйте WOFF2. Для того же шрифта он намного меньше TTF или OTF.
• Урежьте набор глифов. Если удалить ненужные глифы, например все письменности, кроме латиницы, большой шрифт может потерять бо́льшую часть размера. Инструменты для сабсеттинга шрифтов делают это из командной строки.
• Встраивайте только одно начертание. Хорошо подходят шрифт заголовков или иконочный шрифт, который виден на первом экране. Основной текст в четырёх насыщенностях лучше отдавать отдельными файлами, которые браузер сможет закешировать.

Встроенный шрифт уместен прежде всего в самодостаточных HTML-документах и при экспорте canvas или SVG, который должен нести свой шрифт с собой.

Как проверить шрифт в Base64

Если текст отображается шрифтом по умолчанию, откройте инструменты разработчика в браузере и поищите ошибки загрузки шрифтов, затем проверьте, что data URI начинается с data:font/, а данные начинаются с одного из префиксов выше. Начало PCFET0NUWVBF выдаёт HTML-страницу, сохранённую с расширением шрифта. Base64 в шрифт декодирует строку, покажет глифы и сохранит файл.

Вопросы и ответы