/* ============================================================ Я зову — шрифты, лежащие у нас ------------------------------------------------------------ ПОЧЕМУ НЕ С GOOGLE FONTS Три причины, и они те же, по которым мы отказались от reCAPTCHA в форме связи. Не заметить это противоречие было стыдно: капчу мы не поставили из-за утечки адресов посетителей в Google, а шрифты грузили оттуда же на каждой странице. 1. Утечка. Запрос за шрифтом уносит IP-адрес посетителя и заголовки его браузера на чужой сервер за границей. Для 152-ФЗ это передача персональных данных, и нужна она нам ровно ноль раз. 2. Доступность. fonts.googleapis.com в России отвечает неровно, а в сетях с фильтрацией — школы, садики, то есть ровно наши организации — может не ответить вовсе. Тогда сайт покажется системным шрифтом: не сломается, но перестанет быть собой. 3. Скорость. Два лишних домена в цепочке (googleapis для CSS, gstatic для файлов), два DNS-запроса и два рукопожатия TLS до того, как приедет первая буква. ПОЧЕМУ ФАЙЛОВ ВОСЕМЬ, А НЕ ВОСЕМНАДЦАТЬ Сначала их было восемнадцать: по файлу на каждое начертание, как принято со статическими шрифтами. Это была ошибка, и вот какая. Все четыре семейства — переменные: в одном файле лежит вся ось насыщенности от тонкого до чёрного. То есть onest-400.woff2, onest-500.woff2, onest-600.woff2 и onest-700.woff2 были одним и тем же файлом под четырьмя именами — байт в байт, что показывает md5. Обнаруживается это отвратительно: на глаз всё правильно. Начертания разные, заголовки жирные, придраться не к чему. А браузер при этом качает пятнадцать килобайт кириллицы ЧЕТЫРЕ РАЗА — по разу на каждый адрес, потому что для него это четыре разных файла. Двести килобайт лишнего трафика на странице, где всё «работает». Теперь на семейство и подмножество приходится один файл, а насыщенность объявлена диапазоном: font-weight: 100 900. Браузер сам ставит ось в нужное место — ровно для этого переменные шрифты и сделаны. Диапазон у каждого свой и равен настоящей оси файла: обещать 900 там, где ось кончается на 700, значит просить браузер дорисовать разницу самому. ЧТО БРАУЗЕР КАЧАЕТ НА САМОМ ДЕЛЕ Не всё. unicode-range говорит ему, какие символы лежат в каждом файле, и файл забирается, только если на странице встретился такой символ. Русская страница не тянет латинские куски, а Unbounded не грузится, пока не включено оформление «Праздник». font-display: swap — текст показывается системным шрифтом сразу и переключается, когда приедет наш. Пустая страница в ожидании шрифта хуже, чем страница не тем шрифтом. ЛИЦЕНЗИИ Все четыре под SIL Open Font License 1.1. Она требует, чтобы вместе с файлами лежали текст лицензии и уведомления об авторстве, — они в assets/fonts/OFL.txt. Требование не формальное: без этого файла раздача шрифтов условиям лицензии не соответствует. ============================================================ */ /* Caveat — ось 400…700 */ @font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/caveat-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/caveat-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} /* Cormorant Garamond — ось 300…700 */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/cormorant-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} /* Onest — ось 100…900 */ @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/onest-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} /* Unbounded — ось 200…900 */ @font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('../fonts/unbounded-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:200 900;font-display:swap;src:url('../fonts/unbounded-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} /* ============================================================ ГАРНИТУРЫ КАРТОЧКИ ПРИГЛАШЕНИЯ ------------------------------------------------------------ Три роли, которые называет дизайн приглашения: серифная, гротеск и рукописная. Карточку рисует yazovu-core, и он не знает темы; договор — эти три переменные (см. Yz_Assets). ПОЧЕМУ ОНИ ЗДЕСЬ, А НЕ В tokens.css, И ПОЧЕМУ НЕ ЧЕРЕЗ --serif Стояли там и были написаны как --yz-serif: var(--serif). А --serif переопределяет оформление «Праздник» — и переопределяет не для карточки, а для заголовков сайта. Карточка ловила это боком: у тринадцати дизайнов из двадцати четырёх имя набиралось Unbounded вместо Cormorant, и менялось от переключателя оформления в подвале. Комментарий рядом с переменными прямо предупреждал, что «карточка от чужого объявления поменяет гарнитуру втихую», — и она меняла. На оплаченном листе это выходило хуже всего. Лист рисует плагин, темы там нет вовсе: ни этих переменных, ни самих начертаний. Имя печаталось системной Georgia — то есть человек видел на экране одно, а покупал файл, набранный другим шрифтом. Теперь гарнитуры карточки объявлены здесь, рядом с самими начертаниями, литералами и без посредников. Оформление сайта меняет --serif сколько угодно: приглашение — это товар, и его типографика принадлежит дизайну, а не оформлению витрины. ============================================================ */ :root{ --yz-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --yz-sans:"Onest","Segoe UI",system-ui,-apple-system,sans-serif; --yz-hand:"Caveat","Segoe Script",cursive; }