Install FontSwap
Source Code Pro
About Source Code Pro
- Source
- Google Fonts ↗
- Classification
- mono
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Source Code Pro is a monospace font designed by Paul D. Hunt for Adobe, released in 2012 as the monospace member of the Source type family. It provides a professional, neutral coding font with excellent language support and true italic forms.
History and Design
Adobe commissioned Source Code Pro as part of their open-source Source font family, which also includes Source Sans Pro and Source Serif Pro. Paul D. Hunt designed it to complement these families while meeting the specific needs of coding environments. The font balances neutrality with subtle humanist touches.
Why Source Code Pro is Trusted
Source Code Pro has become a standard choice in professional environments:
- Adobe quality: Crafted by a major type foundry
- True italics: Genuine italic design, not sloped roman
- Family harmony: Pairs perfectly with Source Sans/Serif Pro
- Comprehensive support: Extensive language and weight coverage
- Variable font: Modern implementation with weight axis
Technical Features
- Weight range: 200-900 (Variable font with full range)
- True italics: Each weight has a companion italic
- Character set: Extended Latin, Cyrillic, Greek, Vietnamese
- OpenType features: Stylistic alternates, tabular figures
- Professional origin: Adobe foundry quality assurance
Best Use Cases
Source Code Pro excels in:
- Enterprise development: Professional, trusted appearance
- Documentation: Pairs beautifully with Source Sans Pro
- Multi-language projects: Extensive character support
- Adobe ecosystem: Native integration in Creative Cloud
Usage Tips
Use weight 400 for body code, 600 for emphasis. Enable italics for comments to leverage the true italic design. For a cohesive design system, pair with Source Sans Pro for UI and Source Serif Pro for long-form content. Available through Adobe Fonts for Creative Cloud subscribers or Google Fonts for everyone else.
Is Source Code Pro on Google Fonts?
Yes, Source Code Pro is available for free on Google Fonts. Get Source Code Pro on Google Fonts ↗
Alternative For (8)
Source Code Pro is a free alternative to the following premium fonts:
Compare Source Code Pro
See how Source Code Pro compares to other fonts side by side.
Variable Font Axes
Source Code Pro is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
Font Pairings
Fonts that pair well with Source Code Pro based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Source Code Pro in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Courier New to minimize layout shift when loading Source Code Pro.
@font-face {
font-family: 'Source Code Pro Fallback';
src: local('Courier New');
ascent-override: 98.4%;
descent-override: 27.3%;
line-gap-override: 0%;
size-adjust: 97.2%;
}How to Use Source Code Pro
Copy these code snippets to quickly add Source Code Pro to your project.
CSS code for Source Code Pro
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@100..900&display=swap');HTML code for Source Code Pro
<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:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Source Code Pro
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'source-code-pro': ['"Source Code Pro"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-source-code-pro">Your text here</p>Next.js code for Source Code Pro
// Using next/font (Next.js 13+)
import { Source_Code_Pro } from 'next/font/google';
const source_code_pro = Source_Code_Pro({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={source_code_pro.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Source Code Pro"' }}>Your text</p>Expo and React Native code for Source Code Pro
// Install: npx expo install @expo-google-fonts/source-code-pro expo-font
import { useFonts, Source_Code_Pro_400Regular } from '@expo-google-fonts/source-code-pro';
export default function App() {
const [fontsLoaded] = useFonts({
Source_Code_Pro_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Source_Code_Pro_400Regular' }}>
Your text here
</Text>
);
}