Слой архитектора
Дизайн
Имя, адреса, мета и внешний вид этого проекта. Сохранённые настройки читаются на лету — изменение видно при следующей загрузке страницы, без пересборки.
Шрифты
Заголовки, основной текст и моноширинный — откуда берутся семейства и как подключаются.
Три роли, по одному решению на каждую: заголовки, основной текст, моноширинный. Набор открывается системным шрифтом — он ничего не скачивает и никуда не обращается.
Заголовки
От H1 до H4. Именно здесь у проекта появляется характер.
Основной текст
Абзацы, списки, подписи — большая часть того, что человек читает.
Моноширинный
Код, идентификаторы, числа в таблицах.
Берёт то, что уже стоит на устройстве. Ничего не скачивается, ничего не уходит наружу, текст виден в первый же кадр.
Как выглядит
Съешь ещё этих мягких булок — The quick brown fox 0123
Съешь ещё этих мягких булок — The quick brown fox 0123
Съешь ещё этих мягких булок — The quick brown fox 0123
О шрифтах: откуда они берутся и как подключаются
Где они живут. Семейства из этого списка — с Google Fonts (fonts.google.com), все под свободной лицензией OFL или Apache. Сами файлы НЕ хранятся на вашем сервере: посетитель получает их с fonts.googleapis.com, и её кэш уже прогрет почти на каждом устройстве.
Как подключаются. Сохранение записывает имя семейства и адрес таблицы стилей в DESIGN-CONFIG/design-config.json на вашем сервере. Приложение читает этот файл на каждом рендере и выдаёт две вещи: ссылку <link> на таблицу в шапке страницы и переменную CSS, которой пользуется примитив типографики. Именно <link>, а не @import — браузер видит ссылку сразу, тогда как @import внутри <style> стоит лишнего оборота сети ещё до того, как шрифт будет запрошен. Пересборка не нужна: изменение видно на следующей загрузке страницы.
Что это значит в Европе. Подключение внешнего шрифта отдаёт адрес посетителя серверам Google. Немецкий суд признал, что одно это нарушает GDPR (LG München I, 3 O 17493/20). Системный вариант снимает вопрос целиком: он не ходит наружу вовсе. Если нужен и свой шрифт, и эта гарантия — файлы шрифта придётся положить на собственный сервер, и это отдельная работа, а не настройка.
Алфавиты — не мелочь. Шрифт без кириллицы превращает русскую страницу в ряд прямоугольников, и сборка об этом не предупредит: страница отрисуется прекрасно, просто её нельзя будет прочитать. У каждой записи указано, какие алфавиты она покрывает, — сверьте с языками, которые вы включили.
Почему системный шрифт первый. Это самый быстрый из возможных ответов: нечего скачивать, нечего ждать, никаких третьих сторон. Для большинства проектов он же и правильный — свой шрифт оправдывает свою цену только тогда, когда от него действительно зависит бренд.