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

Source Code Pro от Adobe — это бесплатный моноширинный шрифт, созданный для программных интерфейсов.

Source Code Pro — это бесплатное семейство шрифтов с открытым исходным кодом, созданное для использования в программировании и пользовательских интерфейсах. Вы можете подключить его к своему следующему веб-проекту одной ссылкой на Google Fonts. Остальное пусть сделает ваш агент!

fontsvibetypographymonospacedadobegithub

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

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

Исходники

adobe-fonts/source-code-pro

★ 20 430CSS

Открыть на GitHub →

Поскольку Source Code Pro размещён на Google Fonts, подключить его к своему веб-проекту проще простого. Достаточно добавить один элемент link в head вашего HTML-документа. Не нужно ни скачивать и хостить файлы шрифта самостоятельно, ни беспокоиться о конвертации в разные форматы. Ваш агент должен справиться с подключением и настройкой шрифта буквально за несколько минут (а то и быстрее).

Как подключить 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

ЕА