← Все новости·2026-08-06·4 мин чтения

Source Code Pro: бесплатный моноширинный шрифт Adobe для кода

Source Code Pro — бесплатный шрифт от Adobe для интерфейсов с кодом. Подключается через Google Fonts одним тегом, агент настраивает остальное.

fontsvibetypographymonospacedadobegithub

Уже несколько лет подключаю Source Code Pro в проекты почти на автомате — это просто шрифт, за которым тянешься когда надо выводить код. Adobe сделал его специально для программных интерфейсов и он бесплатен и в открытом доступе с 2012 года. Больше 20 000 звёзд на GitHub — для шрифта это очень много.

В наборе восемь вариантов жирности от ExtraLight до Black, прямые и курсивные начертания, и ещё есть вариативная версия которая упаковывает всё это в один файл. Шрифт хорошо читается на маленьких размерах — а это важно когда показываешь ответы API, вывод терминала или вставленный код в веб-приложении. Плохие моноширинные шрифты размываются уже при 12-13px. Source Code Pro — нет.

Исходники

adobe-fonts/source-code-pro

★ 20 430CSS

Открыть на GitHub →

Шрифт есть на Google Fonts — значит добавить его в проект это буквально одна строчка в head. Ничего скачивать, ничего хостить, никаких конвертаций. Агент добавит и настроит всё за пару минут.

Как подключить Source Code Pro к сайту

Добавить теги Google Fonts в <head> HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Применить шрифт в CSS

code, pre, .mono, .code-block {
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
}

Что сказать агенту

Добавь Source Code Pro из Google Fonts в проект: вставь три link-тега в <head>, затем примени font-family: 'Source Code Pro', monospace ко всем элементам code, pre и .mono. Вес 400 для обычного кода, 600 для заголовков блоков кода.

Когда нормальный моноширинный шрифт реально важен

1Блоки и фрагменты кода — читается чётко даже на 12-13px, где большинство шрифтов превращаются в кашу
2Выровненные таблицы данных — логи, финансовые данные, вывод API встают по столбцам ровно
3Терминальный интерфейс — фейковый терминал, панель дебага, консольный вывод выглядят как надо
4Портфолио разработчика — примеры кода смотрятся профессионально, а не «взял первый попавшийся»
5Браузерный редактор кода — если строишь playground или IDE, нормальный шрифт для кода обязателен

✓Что в итоге

Бесплатный проверенный моноширинный шрифт от Adobe — 8 вариантов жирности, курсив, CDN Google Fonts. Один тег link в <head> — и агент применяет шрифт к любому элементу с кодом в проекте. Без файлов, без пакетов.

Источник: github.com

Бесплатный курс

Хватит читать про ИИ — начни строить с ним

Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.

Начать →

▌ Гайды по теме

▸Claude Code в браузере: как открыть без VPN

ЕА