Предпросмотр шрифтов

Посмотрите свой текст любым шрифтом, установленным на этом устройстве, или загрузите файл шрифта — и скопируйте CSS.

Источник шрифта

Активный шрифт

Выводит все шрифты, установленные на этом устройстве. Только в браузерах на Chromium — браузер один раз запросит разрешение.

Загруженные шрифты

Пока ничего не загружено.

TTF, OTF, WOFF и WOFF2 до 20 МБ. Загруженные шрифты регистрируются только в этой странице: они никуда не отправляются и удаляются при перезагрузке.

Текст и типографика

Размер 44 px

Насыщенность

Межбуквенный интервал 0 px

Межстрочный интервал 1.35

Начертание

Регистр

Цвет текста

#0f172a

Фон

#ffffff

Выравнивание

Предпросмотр

Шрифтsystem-uiИсточникОбщие семейства

Съешь же ещё этих мягких французских булок, да выпей чаю 0123456789

Набор символов

CSS

font-family: system-ui;
font-size: 44px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 1.35;
text-align: left;
text-transform: none;
color: #0f172a;
background-color: #ffffff;

Что такое инструмент предпросмотра шрифтов?

Большинство предпросмотров шрифтов в сети показывают один и тот же короткий список «безопасных для веба» гарнитур — список, который вы уже знаете наизусть и который ничего не говорит о шрифтах, реально установленных на вашем компьютере. Эта страница поступает наоборот и отправляется от вашей собственной системы.

Получить шрифт можно тремя способами. Общие семейства (system-ui, sans-serif, serif, monospace) работают в любом браузере. «Прочитать локальные шрифты» через Local Font Access API перечисляет все шрифты, установленные на этом устройстве, и помещает их в список выбора — они отображаются мгновенно, потому что контуры уже есть на вашей машине и ничего не скачивается. Или загрузите файл шрифта (TTF, OTF, WOFF либо WOFF2), и страница зарегистрирует его на время сеанса: так можно проверить лицензионный фирменный шрифт, не устанавливая его.

Выберите шрифт, введите свой текст и настройте размер, насыщенность, начертание, межбуквенный и межстрочный интервалы, цвета и выравнивание. Строка набора символов показывает, как ведут себя цифры и знаки препинания, а блок CSS готов к копированию — включая заготовку @font-face, когда активный шрифт взят из загруженного файла.

Ни ваш текст, ни ваши файлы не покидают браузер.

Как пользоваться

Начало работы

Выберите шрифт на панели «Источник шрифта». Общие семейства работают везде; кнопка «Прочитать локальные шрифты» перечисляет всё, что установлено на этом устройстве.
Чтобы посмотреть шрифт, который уже есть у вас файлом, нажмите «Загрузить файл шрифта» и выберите TTF, OTF, WOFF или WOFF2. Он регистрируется на время сеанса и появляется в том же списке выбора.
Введите текст, который нужно проверить, — заголовок, подпись на кнопке, название продукта.
Настройте размер, насыщенность, начертание, межбуквенный интервал, межстрочный интервал, выравнивание, регистр и оба цвета. Предпросмотр применяет ровно те свойства CSS, которые использовала бы ваша таблица стилей.
Скопируйте блок CSS. Для загруженного шрифта он дополнительно содержит заготовку @font-face, где исходное имя файла стоит на месте будущего пути.

Советы для надёжного результата

Перечисленный список точен, но описывает только это устройство. То, что установлено здесь, вовсе не обязательно есть у ваших посетителей — в рабочем CSS обязательно оставьте запасной стек.
Перечисление локальных шрифтов доступно только в Chromium и требует безопасного контекста (HTTPS или localhost). В Safari и Firefox кнопка скрывается с указанием причины; загрузка файла по-прежнему работает.
Гарнитура с несколькими насыщенностями или начертаниями появляется в списке один раз. Переключайтесь между реально поставляемыми начертаниями регулятором насыщенности и переключателем курсива.
Загруженные шрифты живут только в памяти: перезагрузка их удаляет, на диск не записывается ничего. Это осознанное решение, а не ограничение, которое можно отключить настройкой.
Крупные CJK-файлы (от 10 МБ) разбираются не мгновенно; список обновится, как только шрифт будет декодирован.

Сценарии использования

Проверка лицензионного или фирменного шрифтаЗагрузите файл, введите настоящий заголовок и прочитайте его в том размере, в каком он пойдёт в продакшен. Никакой установки, никаких побочных эффектов на системе, и файл никогда не покидает браузер.

Инвентаризация шрифтов на компьютереНажмите «Прочитать локальные шрифты», чтобы получить точный перечень. Полезно, когда макеты передали в расчёте на гарнитуру, которой на самом деле нет, или когда нужно узнать, какие из кандидатов есть на компьютере заказчика.

Сравнение файлов-кандидатовЗагрузите два-три начертания одной гарнитуры и переключайтесь между ними при фиксированном кегле. Текст остаётся тем же, поэтому вы сравниваете формы букв, а не вспоминаете их.

Настройка интерваловМежбуквенный и межстрочный интервалы связаны с гарнитурой: геометрическому гротеску на малых кеглях обычно нужно чуть больше воздуха, а CJK-текст спокойно выдерживает больший интерлиньяж, чем латиница. Двигайте ползунки и следите за строкой набора символов.

Проверка цифр и пунктуацииТабличные или пропорциональные цифры, форма 1, 4 и 7, начертание @ # & — в интерфейсах с большим количеством данных это решающие детали. Строка набора символов показывает всё это при текущих настройках.

Готовый к вставке CSSКаждый элемент управления питает блок CSS. Если активный шрифт загружен, дополнительно выводится правило @font-face с правильным ключевым словом format(), так что заменить остаётся только URL.

Как обрабатываются локальные шрифты и загрузки

Здесь работают два никак не связанных между собой API браузера, и ведут они себя по-разному.

Перечисление установленных шрифтов использует Local Font Access API: window.queryLocalFonts() возвращает по записи на каждое установленное начертание — с семейством, полным именем, именем PostScript и стилем. Страница группирует записи по семейству, сортирует и отдаёт списку выбора. Для отрисовки ничего скачивать не нужно: имя семейства передаётся прямо в CSS, а контуры предоставляет операционная система — точно так же, как для вашей собственной таблицы стилей. Chromium предоставляет API после одноразового разрешения; Safari и Firefox не реализуют его вовсе, поэтому там точка входа скрывается, а не остаётся на верную неудачу.

Загрузка использует Font Loading API: файл читается в ArrayBuffer, передаётся в new FontFace(family, buffer), загружается и добавляется в document.fonts. С этого момента шрифт ведёт себя как любое другое семейство и может указываться по имени в CSS.

queryLocalFonts() требует безопасного контекста (HTTPS или localhost) и отклоняется с NotAllowedError, если диалог разрешения закрыт; панель сообщает об обоих случаях, а не выбрасывает исключение.
Одно семейство может встречаться в нескольких стилях. Список очищается от дублей по имени семейства, поэтому каждая гарнитура появляется один раз, а начертание выбирается регулятором стиля.
FontFace принимает TTF, OTF, WOFF и WOFF2. Повреждённый файл или неподдерживаемый формат приводит к отклонению load(); страница сообщает об этом, а не оставляет битую запись в списке.
Загрузки хранятся только в памяти — без сетевых запросов, без записи на диск, без localStorage. Поэтому они не переживают перезагрузку.
Общие семейства разрешаются внутри браузера и не требуют никакого API, поэтому остаются доступны там, где два других пути закрыты.

Примеры

Перечисление шрифтов, установленных на этом устройстве

const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]

const families = [...new Set(faces.map((f) => f.family))].sort();

// Выбранное имя передаётся прямо в CSS: контуры даёт система,
// никакие файлы не скачиваются
element.style.fontFamily = `"${families[0]}", sans-serif`;

Регистрация загруженного файла

const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load();        // отклонится, если файл повреждён или формат не тот
document.fonts.add(face);

// дальше — точно так же, как с установленным в системе шрифтом
element.style.fontFamily = '"Aurora Sans", sans-serif';

Блок CSS для загруженного шрифта

@font-face {
  font-family: "Aurora Sans";
  src: url("./AuroraSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;

/* Путь в src — заполнитель, замените его адресом,
   по которому вы раздаёте файл. */

Частые вопросы

Почему в моём браузере нет кнопки «Прочитать локальные шрифты»?

Local Font Access API реализована только в браузерах на Chromium (Chrome, Edge, Opera, Brave) и требует безопасного источника (HTTPS или localhost). В Safari и Firefox кнопка скрывается, а панель объясняет причину — загрузка файла шрифта и общие семейства при этом работают.

При чтении установленных шрифтов что-нибудь уходит на сервер?

Нет. Браузер показывает диалог разрешения, и после вашего согласия страница получает только имена семейств и стилей. Данные шрифтов не читаются, ничего не загружается, и список никуда не передаётся.

Загруженные мной шрифты где-нибудь сохраняются или куда-то отправляются?

Ни то ни другое. Файл читается в память, регистрируется в наборе шрифтов браузера и удаляется при закрытии или перезагрузке страницы. Ни сетевых запросов, ни записи на диск, ни localStorage.

Почему после перезагрузки загруженные шрифты исчезают?

Потому что страница намеренно держит их только в памяти. Сохранение означало бы запись файла шрифта в хранилище браузера, а у инструмента предпросмотра нет причины хранить копию файла, который у вас уже есть. Просто загрузите его снова.

Какие форматы можно загружать?

TTF, OTF, WOFF и WOFF2, до 20 МБ на файл — это четыре контейнерных формата, которые принимает браузерный FontFace. Коллекции TrueType (.ttc) упаковывают несколько начертаний в один файл и не поддерживаются; экспортируйте начертания по отдельности.

Почему некоторые насыщенности выглядят странно или слишком жирно?

Если в семействе нет запрошенной насыщенности, браузер синтезирует её: ложное полужирное утолщает контуры, ложный курсив наклоняет их. Если размазывается только 600, а 400 и 700 выглядят нормально, значит, в семействе просто нет 600.

Можно ли так узнать, что установлено у посетителей?

Нет, и ни один сайт не может. Перечисление требует явного диалога разрешения на устройстве посетителя, поэтому страница никогда не способна тайно описать шрифты чужого человека. Список здесь относится только к этому устройству — именно поэтому в рабочем CSS нужен запасной стек.

Что указать в src директивы @font-face?

Путь, по которому ваша сборка отдаёт файл шрифта, например /fonts/AuroraSans.woff2. Ключевое слово format() формируется правильно по расширению, так что заменить нужно только URL.