Front-end - оптимизация - шрифты⁠⁠

Привет.

Продолжим.

Напомню, что не все советы подойдут всем. Всё же лучше перед внедрением в реальный проект потестировать, посмотреть как повлияла "оптимизация".

## Удаление неиспользуемых символов или сегментирование файла

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

Уменьшить размер файла можно как в несколько кб, так и 90% файла. Всё зависит от файла шрифта и количестве символов в нём.

Для удаления символов используй fontmin. Он же конвертирует файл в нужные расширения, то есть можно взять один .ttf файл и сгенерить .eot, .svg, .woff, с удалёнными символами, к сожалению в .woff2 конвертировать он ещё не научился, поэтому можно использовать ttf2woff2

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

Я для примера брал OpenSans размеров 178kb, оставил только кириллицу, латиницу и весь нужный набор знаков. После удаления ненужных мне символов файл стал весить 9kb. Разница колоссальная.

Будь аккуратен можно угробить хинтинг. Для того, чтобы не убить хинтинг надо тонко настраивать fontmin, для каждого шрифта индивидуально. Поэтому рецепта у меня для тебя нет.

## unicode-range

Браузеру можно подсказать какие символы шрифта используются на сайте/странице, допустим, только кириллица или вообще какой-то символ.

Пример для кириллицы

```

@font-face {

font-display: swap;

font-family: 'Lato';

src: url('/fonts/lato-light/lato-light.rus.woff2') format('woff2'), url('/fonts/lato-light/lato-light.rus.woff') format('woff');

font-weight: 300;

font-style: normal;

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица

}

```

unicode-range - задает определенный диапазон символов, которые будут использоваться из шрифта, определенных в @font-face и доступны для использования на текущей странице. Если на странице не используется символ в этом диапазоне, шрифт не загружается; если он использует хотя бы один, загружается весь шрифт.

Таблица unicode-символов

P.S. на этом про оптимизацию шрифтов всё. Ещё есть общие методы оптимизации. которые затрагивают шрифты, но об этом расскажу в следующих частях.