Install FontSwap
Source Serif Pro
About Source Serif Pro
- Source
- Google Fonts ↗
- Classification
- serif
- 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 Serif Pro is a serif typeface designed by Frank Grießhammer and released by Adobe in 2014 as part of the Source font family. It was created to complement Source Sans Pro and Source Code Pro, providing a complete type system for editorial and publishing applications.
History and Design
Frank Grießhammer developed Source Serif Pro while working at Adobe. The design draws inspiration from the transitional serifs of Pierre Simon Fournier, blending historical elegance with contemporary functionality. The typeface features a moderate x-height, subtle bracketed serifs, and classical proportions that perform beautifully both in print and on screen.
Why Source Serif Pro is Popular
Source Serif Pro has become a go-to choice for designers seeking a high-quality free serif alternative to premium typefaces like Georgia, Times, and Tiempos. Its comprehensive character set, excellent language support, and professional design make it suitable for newspapers, magazines, books, and digital publications. The Adobe pedigree ensures exceptional quality and ongoing development.
Technical Features
- Variable font: Continuous weight axis from ExtraLight (200) to Black (900)
- Optical sizes: Designed to work well at both text and display sizes
- Extensive character set: Supports Latin, Cyrillic, Greek, and Vietnamese
- OpenType features: Small caps, old-style figures, tabular figures, and ligatures
- Comprehensive family: Part of the larger Source family ecosystem
Best Use Cases
Source Serif Pro excels in:
- Long-form content: Optimized for extended reading in articles and books
- Editorial design: Perfect for newspapers and magazines
- Academic publishing: Professional appearance for scholarly work
- Corporate documents: Elegant choice for reports and presentations
- Web typography: Excellent screen rendering at various sizes
Usage Tips
For body text, use weight 400 at 16-18px with 1.5-1.6 line height for optimal readability. Use weight 600 or 700 for headlines and subheadings. Enable old-style figures for body text and tabular figures for data tables. Pairs beautifully with Source Sans Pro for a cohesive typographic system.
Is Source Serif Pro on Google Fonts?
Yes, Source Serif Pro is available for free on Google Fonts. Get Source Serif Pro on Google Fonts ↗
Alternative For (24)
Source Serif Pro is a free alternative to the following premium fonts:
Adobe's transitional serif with optical sizing and reliable cross-platform rendering
Adobe's transitional serif with optical sizing and reliable cross-platform rendering
Adobe's transitional serif with optical sizing and variable font support
Compare Source Serif Pro
See how Source Serif Pro compares to other fonts side by side.
Variable Font Axes
Source Serif Pro is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
| opsz | 8 | 14 | 60 |
Font Pairings
Fonts that pair well with Source Serif Pro based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Source Serif Pro in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Source Serif Pro.
@font-face {
font-family: 'Source Serif Pro Fallback';
src: local('Georgia');
ascent-override: 91.8%;
descent-override: 33.5%;
line-gap-override: 0%;
size-adjust: 98.66%;
}How to Use Source Serif Pro
Copy these code snippets to quickly add Source Serif Pro to your project.
CSS code for Source Serif Pro
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@100..900&display=swap');HTML code for Source Serif 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+Serif+Pro:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Source Serif Pro
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'source-serif-pro': ['"Source Serif Pro"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-source-serif-pro">Your text here</p>Next.js code for Source Serif Pro
// Using next/font (Next.js 13+)
import { Source_Serif_Pro } from 'next/font/google';
const source_serif_pro = Source_Serif_Pro({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={source_serif_pro.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Source Serif Pro"' }}>Your text</p>Expo and React Native code for Source Serif Pro
// Install: npx expo install @expo-google-fonts/source-serif-pro expo-font
import { useFonts, Source_Serif_Pro_400Regular } from '@expo-google-fonts/source-serif-pro';
export default function App() {
const [fontsLoaded] = useFonts({
Source_Serif_Pro_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Source_Serif_Pro_400Regular' }}>
Your text here
</Text>
);
}