← All news·2026-08-06·4 min read

Adobe’s Source Code Pro is a free monospaced font designed for programming interfaces.

Source Code Pro is a free and open-source font family designed for programming and user interface use. You can include it in your next web project with a single link to Google Fonts. Let your agent take care of the rest!

fontsvibetypographymonospacedadobegithub

I’ve used Source Code Pro for years in my web projects, but I never gave it much thought — it’s a common go-to for displaying code. The font was created by Adobe for use in programming interfaces and has been free and open-source since 2012. With over 20,000 stars on GitHub, that’s a lot of people using this font!

Source Code Pro is available in eight weights, ranging from ExtraLight to Black, in both normal and italic styles, and even as a variable font. It scales well to small sizes, which is crucial when displaying code, like API responses, terminal output, or inline code in your web app. A poorly designed monospace font will quickly become unreadable when scaled down to 12–13px. Source Code Pro does not.

Source

adobe-fonts/source-code-pro

★ 20,430CSS

Open on GitHub →

With Source Code Pro being hosted on Google Fonts, it’s a snap to include in your web project. Simply include a single link element in the head of your HTML document. There’s no need to download or host the font files yourself, or to worry about converting them to different formats. Your agent should be able to include and configure the font in just a few minutes (or less).

How to add Source Code Pro to your website

Add Google Fonts link tags to your HTML <head>

<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">

Apply the font in CSS

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

What to tell your agent

Add Source Code Pro from Google Fonts to this project: insert the three link tags in the <head>, then apply font-family: 'Source Code Pro', monospace to all code, pre, and .mono elements. Use weight 400 for body code and weight 600 for code block headers.

When a proper monospace font actually makes a difference

1Code blocks and snippets — renders sharply at small sizes like 12-13px where most fonts turn blurry or muddy
2Aligned data tables — fixed-width columns for logs, financial data, or API output stay perfectly lined up
3Terminal-style UI panels — fake terminal interfaces, debug consoles, shell output all look right with a real mono font
4Developer portfolios — showing code samples without it looking like you grabbed whatever font was around
5In-browser code editors — if you're building a playground or IDE-style tool, a proper coding font matters a lot

✓What you get

A free, battle-tested monospace font from Adobe — 8 weights, italic variants, Google Fonts CDN. One link tag in your HTML head and your agent can apply it to any code element in the project. No files to manage, no package installs.

Source: github.com

Free course

Stop reading about AI — start building with it

The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.

Start free →

▌ Related guides

▸Claude Code on the Web: Code From a Browser, Zero Install