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

Файлы шрифтов содержат в себе векторное описание каждого символа и метаданные. Также они часто содержат различные тонкие визуальные настройки.

Вот так влияют тонкие настройки на отображения шрифта. Все эти настройки нужны для дизайнеров, а не для веб-сайтов.

Чтобы оптимизировать шрифт надо:

Оставить в файле буквы только того алфавита, который используется на сайте. Шрифт может содержать больше 10 языков, но вам будет достаточно 2: языка вашего сайта и английский алфавит, чтобы отображать иностранные названия сайтов, брендов и прочего.
Удалить лишние символы. Например, дроби, сложные математические знаки и другие редко используемые символы.
Удалить все тонкие настройки, заложенные в шрифт его автором. Они всё равно не могут быть использованы на сайте.
Использовать формат woff2.

Сделать всё это можно в нашем сервисе.

Полезные материалы:

Узнайте, как работают и на что влияют тонкие настройки файлов шрифтов можно в сервисе https://fontdrop.info/.
Полный список подобных настроек описан здесь.
Наша статья по оптимизации шрифтов.

Ниже пример того, как много неиспользуемых символов содержит стандартный файл шрифта Roboto Regular:

Демонстрация

PHP код

Открыть демонстрацию Скачать код примера

<?php
// Получаем список глифов, доступных в файле
$data = exec("fc-query --format='%{charset}\\n' Roboto-Regular.ttf", $output);
$data = array_pop($output);
$data = explode(' ', $data);
$glyphs = [];
foreach($data as $range) {
    $range = explode('-', $range);
    $range[1] = hexdec($range[1] ?? $range[0]);
    $range[0] = hexdec($range[0]);
    for($i = $range[0]; $i <= $range[1]; $i++) {
        $glyphs[] = $i;
    }
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @font-face {
                font-family: 'Roboto';
                src: url('./Roboto-Regular.ttf') format('truetype');
                font-style: normal;
                font-weight: 400;
            }
            body {
                font-family: Roboto;
            }
            div {
                border: 1px solid #000;
                margin: 2px;
                padding: 3px;
                border-radius: 3px;
                display: inline-block;
                min-width: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>В шрифте Roboto.ttf <?=sizeof($glyphs)?> символов. Обычно используется не более 120.</h1>
        <?php foreach($glyphs as $glyph) { ?>
            <div>&#<?=$glyph?>;</div>
        <?php } ?>
    </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах