/* ============================================================
fonts.css - self-hosted шрифты. CDN Google Fonts не
используем: иностранная выдача статики на сайте РФ - лишний
внешний запрос и лишний риск, плюс шрифт должен пережить
недоступность gstatic.
Файлы кладём в wp-content/themes/volkov/assets/fonts/
Относительный путь из этого файла - ../fonts/
Ожидаемые имена (см. инструкцию внизу файла):
golos-text-400-cyrillic.woff2 golos-text-400-latin.woff2
golos-text-500-cyrillic.woff2 golos-text-500-latin.woff2
golos-text-700-cyrillic.woff2 golos-text-700-latin.woff2
pt-serif-400-cyrillic.woff2 pt-serif-400-latin.woff2
pt-serif-700-cyrillic.woff2 pt-serif-700-latin.woff2
font-display: swap - текст виден сразу системным шрифтом,
подменяется по загрузке. Никакого невидимого текста.
unicode-range разводит кириллицу и латиницу: браузер качает
только нужный кусок.
============================================================ */
/* ---------- Golos Text - текст и интерфейс ---------------- */
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/golos-text-400-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/golos-text-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+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/golos-text-500-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/golos-text-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+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/golos-text-700-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/golos-text-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+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- PT Serif - заголовки -------------------------- */
@font-face {
font-family: "PT Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/pt-serif-400-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "PT Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/pt-serif-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+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "PT Serif";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/pt-serif-700-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "PT Serif";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/pt-serif-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+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
КАК ПОЛУЧИТЬ woff2 (три способа, любой на выбор)
Оба шрифта - Open Font License, self-hosting разрешён.
Golos Text: Paratype, лицензия OFL.
PT Serif: Paratype, лицензия OFL.
------------------------------------------------------------
СПОСОБ 1. Fontsource через npm - самый быстрый и точный,
файлы уже нарезаны по subset и по весам.
mkdir -p /tmp/fonts && cd /tmp/fonts
npm i @fontsource/golos-text @fontsource/pt-serif
Готовые woff2 лежат тут:
node_modules/@fontsource/golos-text/files/
golos-text-cyrillic-400-normal.woff2
golos-text-cyrillic-500-normal.woff2
golos-text-cyrillic-700-normal.woff2
golos-text-latin-400-normal.woff2 (и 500, 700)
node_modules/@fontsource/pt-serif/files/
pt-serif-cyrillic-400-normal.woff2
pt-serif-cyrillic-700-normal.woff2
pt-serif-latin-400-normal.woff2 (и 700)
Переименовать под имена выше и положить в
themes/volkov/assets/fonts/ :
for w in 400 500 700; do
cp node_modules/@fontsource/golos-text/files/golos-text-cyrillic-$w-normal.woff2 \
assets/fonts/golos-text-$w-cyrillic.woff2
cp node_modules/@fontsource/golos-text/files/golos-text-latin-$w-normal.woff2 \
assets/fonts/golos-text-$w-latin.woff2
done
for w in 400 700; do
cp node_modules/@fontsource/pt-serif/files/pt-serif-cyrillic-$w-normal.woff2 \
assets/fonts/pt-serif-$w-cyrillic.woff2
cp node_modules/@fontsource/pt-serif/files/pt-serif-latin-$w-normal.woff2 \
assets/fonts/pt-serif-$w-latin.woff2
done
------------------------------------------------------------
СПОСОБ 2. Прямо из Google Fonts CSS API - забрать те же
файлы, что раздаёт gstatic, без npm.
curl -sL -A "Mozilla/5.0 Chrome/120" \
"https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;700&family=PT+Serif:wght@400;700&subset=cyrillic,latin&display=swap" \
-o gf.css
grep -o 'https://[^)]*\.woff2' gf.css | sort -u | \
while read u; do curl -sL "$u" -O; done
User-Agent обязателен: без него API отдаёт ttf, а не woff2.
В gf.css над каждым @font-face стоит комментарий subset
(строки вида «cyrillic» и «latin» в комментариях Google) - по ним разложить файлы по
именам выше. Заодно сверить unicode-range: если Google их
поменял, скопировать актуальные в этот файл.
------------------------------------------------------------
СПОСОБ 3. Свой subset из исходного ttf (если нужен ещё
меньший вес - только кириллица и цифры).
pip install fonttools brotli
pyftsubset GolosText-Regular.ttf \
--flavor=woff2 \
--unicodes="U+0000-00FF,U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116,U+2013,U+2014,U+2018-201E,U+2022,U+2026,U+20BD,U+2116" \
--layout-features="kern,liga,tnum" \
--output-file=golos-text-400-cyrillic.woff2
------------------------------------------------------------
ПРОВЕРКА ПОСЛЕ УКЛАДКИ
1. Размер: каждый кириллический woff2 ожидаемо 15-30 КБ.
Файл меньше 5 КБ - скачался HTML ошибки, не шрифт.
file assets/fonts/*.woff2 должен давать "Web Open Font Format (Version 2)".
2. В шапке темы предзагрузить только два критичных файла,
которые нужны на первом экране:
Больше двух preload не вешать - конкурируют с HTML.
3. В nginx отдавать шрифты с длинным кэшем:
location ~* \.woff2$ { add_header Cache-Control "public, max-age=31536000, immutable"; }
4. В theme.json темы продублировать fontFace теми же путями,
иначе редактор блоков покажет системный шрифт.
============================================================ */