Открыл для себя такую технику. Можно выбрать из фонта (например, с математическими символами или иконками) только те глифы, которые реально нужны, и запаковать их в base64 data URL. Получаются (относительно) короткие строки, которые можно вставить в CSS, и далее их юзать (либо из разметки, либо через
content). Выглядит примерно так:
@font-face {
font-family: "VectorLib";
font-style: normal;
font-display: swap;
src: url("data:font/woff2;base64,--строка-с-закодированными-глифами--")
format("woff2");
}
Эта техника является альтернативой инлайнингу SVG.
Ещё мне посоветовали такую тулзу:
https://transfonter.org/, которая автоматизирует оба процесса (отбор символов и энкодинг в data URL), но её я пока не смотрел.
I'm a sewer mutant, and my favorite authors are Edgar Allan Poo, H.G. Smells and George R.R. Martin.