/* --------------------------------------------------------------------------- * ЭТОТ ФАЙЛ — ЕДИНСТВЕННЫЙ ИСТОЧНИК @font-face В ТЕМЕ. * * Он подключается и на фронте (wp_enqueue_style), и в редакторе * (add_editor_style) — оба вызова в inc/enqueue.php. В theme.json массива * fontFace СОЗНАТЕЛЬНО НЕТ, и возвращать его нельзя: WP печатает такие * объявления инлайном в КОНЦЕ , то есть ПОЗЖЕ этого файла, и без * unicode-range. Последнее объявление семейства побеждает на всём диапазоне * символов — браузер тянул только кириллический файл, рисовал текст, * обнаруживал, что пробела и пунктуации в нём нет (они в latin-подсете), и лишь * тогда шёл за latin. Волны загрузки становились последовательными: на проде * latin-подсеты стартовали на 1047 мс при FCP 1036 мс, сдвиг вёрстки — 1229 мс. * Если fontFace всё-таки понадобится, у КАЖДОГО начертания обязан быть * unicodeRange — это 28 записей-близнецов отсюда, дешевле не дублировать. * --------------------------------------------------------------------------- * МЕТРИЧЕСКИЕ ФОЛБЭКИ (лечение CLS от подмены шрифта). * * Задача. font-display:swap рисует текст системным шрифтом и переверстывает его, * когда приедет woff2. Системный шрифт у́же Manrope, и абзац при подмене менял * число строк — .hero-lede толкал вниз .lead-card. Замеры холодного профиля на * /uk/polish/: CLS 0.301 (768), 0.274 (480), 0.194 (1280) при пороге Google 0.1. * * Решение. Объявляем ПРОМЕЖУТОЧНОЕ семейство: тот же системный шрифт, но с * подогнанными метриками — size-adjust выравнивает среднюю ширину знака, * ascent/descent-override — высоту строки. Пока настоящий шрифт летит, текст * занимает ровно ту же площадь, и подмена ничего не сдвигает. Ставится в стек * между настоящим шрифтом и системным (tokens.css, theme.json, ui-kit.css). * * НАЧЕРТАНИЕ НА КАЖДЫЙ ВЕС, А НЕ ОДНО НА СЕМЕЙСТВО. Первая версия объявляла по * одному фолбэку без дескриптора font-weight — семейство состояло из * единственного 400-го начертания, и всё, что просило 600/700/800, матчилось на * него и получало СИНТЕТИЧЕСКИЙ ЖИР поверх выверенного size-adjust. Замер на * корне при 360: .hero-pills (Manrope 700) — 125 px фолбэком против 170 px * настоящим шрифтом, то есть на строку меньше, CLS 0.191. Поэтому у каждого веса * своё начертание, у тяжёлых источник — Arial Bold, и синтезировать браузеру * больше нечего. * * ОТКУДА ЧИСЛА — ЗАМЕР В БРАУЗЕРЕ, А НЕ РАСЧЁТ ПО ТАБЛИЦАМ ШРИФТА. Первый заход * считал среднюю ширину глифа fontTools по файлам из assets/fonts/ и разошёлся * с фактической отрисовкой на 5–10 % (у Manrope 700 таблицы давали 89 % от Arial * Bold, браузер отрисовывает 98 %) — среднее по таблице не знает ни кернинга, ни * шейпинга, ни того, какие знаки реально встречаются в тексте. Поэтому за истину * взят замер: суммарная ширина четырёх реальных строк сайта (uk-заголовок, * uk-лид, ru-подзаголовок, строка чипов) на 100 px в настоящем шрифте, делённая * на ту же величину у Arial соответствующей насыщенности. * size-adjust = ширина в настоящем шрифте / ширина в Arial (Regular до 600, * Bold от 600) * *-override = метрика шрифта (Manrope asc 1.0660 desc 0.3000; * Unbounded asc 0.9950 desc 0.2450; lineGap у обоих 0) / * size-adjust * Пересчитывать нужно один раз при смене шрифта, не при каждой правке. * * local() ТОЛЬКО метрически совместимые с Arial. Roboto (Android) сознательно * НЕ включён: он у́же Arial, и подгонка под Arial сделала бы там хуже, чем * отсутствие правила — при непопадании @font-face просто выпадает, и стек * доезжает до system-ui, то есть до прежнего поведения. * * И ЧЕГО МЕТРИКИ НЕ ЛЕЧАТ В ПРИНЦИПЕ. У .hero h1 в base.css ширина задана в * `ch` (max-width:18ch), а `ch` — это ширина знака «0» в шрифте самого * элемента. Текст и контейнер масштабируются вместе, size-adjust сокращается, и * число строк определяет внутренняя пропорция шрифта, которую метриками не * подделать. Заголовок лечится только тем, что настоящий Unbounded есть уже к * первой отрисовке, — за это отвечает preload в inc/enqueue.php. * ------------------------------------------------------------------------- */ /* Manrope: 400/500 — от Arial Regular, 600/700 — от Arial Bold. */ @font-face { font-family: 'Manrope Fallback'; font-weight: 100 449; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Arimo'); size-adjust: 100.91%; ascent-override: 105.64%; descent-override: 29.73%; line-gap-override: 0%; } @font-face { font-family: 'Manrope Fallback'; font-weight: 450 549; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Arimo'); size-adjust: 102.71%; ascent-override: 103.79%; descent-override: 29.21%; line-gap-override: 0%; } @font-face { font-family: 'Manrope Fallback'; font-weight: 550 649; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 96.46%; ascent-override: 110.51%; descent-override: 31.10%; line-gap-override: 0%; } @font-face { font-family: 'Manrope Fallback'; font-weight: 650 900; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 98.10%; ascent-override: 108.66%; descent-override: 30.58%; line-gap-override: 0%; } /* Unbounded — дисплейный, легче 600 начертаний у него нет вовсе, поэтому нижний диапазон отдан 600-му. */ @font-face { font-family: 'Unbounded Fallback'; font-weight: 100 649; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 127.30%; ascent-override: 78.16%; descent-override: 19.25%; line-gap-override: 0%; } @font-face { font-family: 'Unbounded Fallback'; font-weight: 650 749; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 128.97%; ascent-override: 77.15%; descent-override: 19.00%; line-gap-override: 0%; } @font-face { font-family: 'Unbounded Fallback'; font-weight: 750 900; src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold'); size-adjust: 131.16%; ascent-override: 75.86%; descent-override: 18.68%; line-gap-override: 0%; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-600-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/unbounded-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-700-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-700-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/unbounded-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/unbounded-800-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/unbounded-800-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/unbounded-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/unbounded-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }