Оптимизация шрифтов

Разделяет большой шрифт на несколько файлов по языкам. Предоставляет кроссплатформенный CSS код, для их подключения.

Русский
Удалить

Эта опция добавляет к каждому языку 21 английскую букву. Они часто употребляются в названии брендов и продуктов.
Займет от 5 до 15 секунд за
каждый файл.

Превью CSS файла

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

Почему шрифты нужно оптимизировать?

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

Какие браузеры поддерживаются?

Все файлы шрифтов генерируются в 4 форматах: woff2, woff, truetype, otf. Это обеспечивает поддержку в следующих браузерах: IE 9+, Chrome 3.5+, Safari 3+, Firefox 3.5+, Opera 10.1+, Android 2.2+, iOS 4.3+.

Насколько это ускоряет сайт?

Вы выиграйте до 0.4 секунды. Учитывая, что хорошие страницы должны загружаться быстрее 2 секунд, то это 20%. Такое ускорение может увеличить конверсию для мобильных посетителей на несколько процентов. Это просто подарок, учитывая, что вся работа займёт не более пары часов.

Пример оптимизации популярных шрифтов. Сравнивается скачанный с fonts.google.com файл в ttf формате с оптимизированными в woff2:

Исходный Русский Английский Немецкий Французский
Roboto-Regular 168.3 КБ 15.4 15.4 16.1 17.5
OpenSans-Regular 129.8 КБ 14 14.2 14.8 15.6
Ubuntu-Regular 299.7 КБ 27.2 25.7 26.8 28.9
Lato-Regular 75.2 КБ 7.1 14.5 15.3 17.2
Как использовать оптимизированные файлы?

Загрузите их на свой сервер. Затем замените текущий CSS код подключения шрифта на предоставленный. Убедитесь, что пути до файлов шрифтов корректные. Затем замените название шрифта в аттрибуте «font-family» на новое значение во всех своих CSS файлах. Если у вас возникли трудности, то обратитесь к программисту.

У меня есть вопрос, предложение или замечание.

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

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Ладушки