/* Фирменный GraphikTT. * * Раньше начертания лежали здесь строками base64 внутри @font-face: файл * весил 243 КБ и подключался -ом в , то есть страница не * рисовалась, пока эти 243 КБ не приедут. Теперь начертания лежат обычными * .woff2 рядом, а этот файл — только объявления. Он крошечный, а шрифты * едут отдельными запросами и первый экран не держат: font-display: swap * даёт браузеру нарисовать текст запасным Arial сразу и подменить его, * когда приедет фирменный. * * Файлы обрезаны под сайт — tools/subset-fonts.py. В исходном Graphik 501 * знак: латиница с диакритикой на полсотни языков, дроби, валюты, * типографская экзотика. Сайт набирает из них полторы сотни, остальные * ехали к каждому посетителю просто так. После обрезки начертание весит * 21–22 КБ вместо 43–47, и шрифты перестали быть половиной веса страницы. * * Нетронутые оригиналы лежат в tools/fonts-original/ — не в public/, иначе * Astro скопировал бы их в dist и они уехали бы в прод рядом с обрезанными. * Правится состав знаков — правится SAFETY в скрипте, и он прогоняется * заново по собранному dist. * * Шрифт лицензионный: подменять его системным или гуглофонтом нельзя, * поэтому экономия только на способе доставки и на лишних знаках. * * Начертание 300 (graphiktt-300.woff2) лежит рядом, но не объявлено: * в вёрстке оно не используется ни разу (в ходу 400, 500, 600, 700, где * 500 по правилам подбора CSS и так отдаётся на 400). Объявить его — значит * подарить браузеру ещё 21 КБ, которые никто не покажет. Понадобится — * дописать сюда такой же блок, файл на месте. */ @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/graphiktt-400.woff2') format('woff2'); } @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/graphiktt-600.woff2') format('woff2'); } @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/graphiktt-700.woff2') format('woff2'); } /* Стрелки и бесконечность. * * Трёх знаков — ← → ∞ — в Graphik нет вовсе, хотя сайт их набирает: * стрелки стоят в хлебных крошках и в ссылках «назад к списку», знак * бесконечности — на странице 404. Браузер молча подставлял вместо них * системный шрифт, и на маке это был один рисунок, на винде другой, * на телефоне третий. * * Дорисовать их внутрь Graphik нельзя: обрезать купленный шрифт лицензия * разрешает, дополнять своими контурами — нет. Поэтому знаки собраны * отдельным шрифтом (tools/make-marks-font.py, контуры считаются кодом по * метрикам того же начертания) и объявлены тем же семейством с * unicode-range ровно на эти три позиции. * * Объявления идут ПОСЛЕ основных: при равном приоритете побеждает * последнее, а внутри своего unicode-range ему и положено побеждать. * Файлы по 600 байт, и браузер скачивает их, только если знак на странице * встретился, — за первый экран без стрелок не платит никто. * * Три начертания, а не одно: штрих у Graphik идёт от 87 единиц на 400 до * 207 на 700, и одна стрелка на все веса выглядела бы в жирном тексте * проволокой. */ @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dorado-marks-400.woff2') format('woff2'); unicode-range: U+2190, U+2192, U+221E; } @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/dorado-marks-600.woff2') format('woff2'); unicode-range: U+2190, U+2192, U+221E; } @font-face { font-family: 'GraphikTT'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dorado-marks-700.woff2') format('woff2'); unicode-range: U+2190, U+2192, U+221E; }