_ ___ ______?

Используйте системные

            body {
                font-family: -apple-system, BlinkMacSystemFont,
                'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
                'Helvetica Neue', Arial, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji',
                'Segoe UI Symbol';
            }
        

DIN Condensed

Glyphhanger

            npm install -g glyphhanger
            glyphhanger --whitelist=… --subset=*.ttf --formats=ttf
        

1. din-latin.ttf
2. din-latin-extended.ttf
3. din-cyrillic.ttf

Web font tools

            brew tap bramstein/webfonttools
            brew install woff2 sfnt2woff-zopfli
            woff2_compress din.ttf               >> din.woff2
            sfnt2woff-zopfli din.ttf             >> din.woff
        

А ещё у вас появятся woff2_decompress и woff2sfnt-zopfli,
чтобы разжимать файлы обратно, если нужно.

Google Fonts

            <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?
                family=Roboto:400,400i,700&
                subset=cyrillic&text=Logo&
                display=swap">
        

<link rel="dns-prefetch"> и <link rel="preconnect">

Adobe Fonts (Typekit)

            <link rel="stylesheet"
                href="https://use.typekit.net/idy4xgk.css">
        

<link rel="dns-prefetch"> и <link rel="preconnect">

Старьё

            @font-face {
                font-family: 'DIN Condensed';
                src: url('din.eot');
                src: url('din.eot?#iefix') format('embedded-opentype'),
                     url('din.woff2') format('woff2'),
                     url('din.woff') format('woff'),
                     url('din.ttf') format('truetype'),
                     url('din.svg#din') format('svg');
                font-weight: bold;
                font-style: normal;
            }
        

Новьё

            @font-face {
                font-family: 'DIN Condensed';
                font-style: normal;
                font-weight: bold;
                src: url('din.woff2') format('woff2'),
                     url('din.woff') format('woff');
            }
        

1. WOFF2
2. WOFF

Локальные

            @font-face {
                font-family: 'DIN Condensed';
                src: local('DINCondensed-Bold'),
                     local('DIN Condensed Bold'),
                     url('din.woff2') format('woff2'),
                     url('din.woff') format('woff');
            }
        

Саша Львова

Латиница

            @font-face {
                font-family: 'DIN Condensed';
                font-style: normal;
                font-weight: bold;
                src: url('din-latin.woff2') format('woff2'),
                     url('din-latin.woff') format('woff');
            ✂️------------------------︎
        

Латиница

            ------------------------✂️
                unicode-range:
                    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                    U+20AC, U+2122, U+2191, U+2193, U+2212,
                    U+2215, U+FEFF, U+FFFD;
            }
        

Расширенная латиница

            @font-face {
                font-family: 'DIN Condensed';
                font-style: normal;
                font-weight: bold;
                src: url('din-latin-extended.woff2') format('woff2'),
                     url('din-latin-extended.woff') format('woff');
            ✂️------------------------︎
        

Расширенная латиница

            ------------------------✂️
                unicode-range:
                    U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
                    U+20A0-20AB, U+20AD-20CF, U+2113,
                    U+2C60-2C7F, U+A720-A7FF;
            }
        

Кириллица

            @font-face {
                font-family: 'DIN Condensed';
                font-style: normal;
                font-weight: bold;
                src: url('din-cyrillic.woff2') format('woff2'),
                     url('din-cyrillic.woff') format('woff');
            ✂️------------------------︎
        

Кириллица

            ------------------------✂️
                unicode-range:
                    U+0400-045F, U+0490-0491,
                    U+04B0-04B1, U+2116;
            }
        

Как работают шрифты

1. Загружаем и парсим HTML, находим стили
2. Загружаем стили, находим шрифты
3. Сравниваем стили и текст, решаем какие шрифты нужны
4. Загружаем шрифты
5. Рисуем интерфейс

Саша Львова

Google Fonts

            <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?
                family=Roboto:400,400i,700&
                subset=cyrillic&text=Logo&
                display=swap">
        

Подсказка

            @font-face {
                font-family: 'DIN Condensed';
                font-display: swap;
                src: url('din.woff2') format('woff2'),
                     url('din.woff') format('woff');
            }
        

Инлайновое подключение?

            <head>
                <style>
                    @font-face { … }
                    @font-face { … }
                </style>
                <link rel="stylesheet" href="style.css">
            </head>
        

Предзагрузка рано!

            <link rel="preload" href="rubik-regular-latin.woff2"
                  as="font" type="font/woff2"
                  crossorigin>
            <link rel="preload" href="rubik-regular-cyrillic.woff2"
                  as="font" type="font/woff2"
                  crossorigin>
        

Прямое начертание

            @font-face {
                font-family: 'Rubik';
                font-style: normal;
                font-weight: normal;
                src: url('rubik-regular.woff2') format('woff2'),
                     url('rubik-regular.woff') format('woff');
            }
        

Курсивное начертание

            @font-face {
                font-family: 'Rubik';
                font-style: italic;
                font-weight: normal;
                src: url('rubik-italic.woff2') format('woff2'),
                     url('rubik-italic.woff') format('woff');
            }
        

Полужирное начертание

            @font-face {
                font-family: 'Rubik';
                font-style: normal;
                font-weight: bold;
                src: url('rubik-bold.woff2') format('woff2'),
                     url('rubik-bold.woff') format('woff');
            }
        

Использование

            body {
                font-family: 'Rubik', sans-serif;
            }
            h2 {
                font-weight: bold;
            }
        

Фолбэк на общий тип шрифта

            body {
                font-family: 'Rubik', sans-serif;
                font-family: 'Georgia', serif;
                font-family: 'Fira Code', monospace;
            }
        

Спасибо!

Ссылки

• Glyphhanger и Web font tools
• Font style matcher
• Font-display playground
• Fontastic Web Performance
• The 5 Ys of Web Font Loading Perf

@pepelsbey

sokr.me/waf