Font Optimization

Font files contain a vector description of each character and metadata. They also often contain various subtle visual settings.

That’s how fine-tuning affects font displays. All these settings are needed for designers, not for websites.

To optimize the font, you need to:

Leave only the letters of the alphabet used on the site in the file. The font can contain more than 10 languages, but 2 will be enough for you: the language of your site and the English alphabet to display foreign names of sites, brands, and other things.
Remove extra characters. For example, fractions, complex mathematical signs and other rarely used symbols.
Remove all the fine-tuning embedded in the font by its author. They can’t be used on the site anyway.
Use the woff2 format.

You can do all this in our service.

Useful materials:

You can find out how the fine-tuning of font files works and what is affected in the service [https://fontdrop.info /](https://fontdrop.info /).
A complete list of similar settings described here.
Our article on font optimization.

Below is an example of how many unused characters the standard Roboto Regular font file contains:

Demonstration

PHP code

Open a demo Download the example code

<?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>

Lessons

Font Optimization

PRO subscription for working with the service