Install FontSwap
Spectral
About Spectral
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 200, 300, 400, 500, 600, 700, 800
- Features
- 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 →Spectral is a serif by Production Type, commissioned for on-screen reading and published through Google Fonts in 2017 under the SIL Open Font License. It was drawn specifically for the browser and for Google Docs — an unusual origin for a text serif, and one that shows in the details.
Design
Most screen serifs are adaptations: a print face with the contrast flattened and the serifs thickened until it survives rasterisation. Spectral was drawn the other way round, starting from the constraints of the screen. The stroke contrast is low but not absent, the serifs are cleanly bracketed rather than slabbed, and the x-height is large enough to hold at 15–17px without the letterforms filling in.
The italic is a genuine cursive rather than a slanted roman, which matters more than it sounds — in long-form text, a real italic marks emphasis without the jarring optical break a sloped roman produces.
Technical features
- Seven weights, 200 through 800, each with a true italic — fourteen styles in total
- Not a variable font: the weights are static instances
- Script coverage: Latin, Latin Extended, Cyrillic, Cyrillic Extended and Vietnamese
- Drawn for screen text rather than adapted from a print design
Best use cases
- Long-form reading: articles, essays, documentation, reports
- Editorial sites: where a serif needs to carry body copy rather than just headlines
- Academic and institutional publishing: the weight range supports real hierarchy
- Google Docs and web documents: its original commission
Where it struggles
Spectral is a text face and behaves like one at display sizes — set it at 72px and it looks competent rather than characterful, lacking the sharpened detail an optical display cut would bring. The absence of a variable axis also means seven separate files if you use the full range, which is a meaningful payload on the web; most projects should pick two or three weights and stop there.
Usage tips
The 300 and 200 weights are genuinely usable for large intros and pull quotes, which is unusual for a screen serif and worth exploiting. For body text, 400 at 17–19px with generous line height is where it looks best. Pair it with a neutral grotesque for interface chrome and headings if you want contrast, or set it against itself — the weight range is wide enough to build a whole hierarchy from Spectral alone.
Is Spectral on Google Fonts?
Yes, Spectral is available for free on Google Fonts. Get Spectral on Google Fonts ↗
Alternative For (3)
Spectral is a free alternative to the following premium fonts:
Screen-first serif drawn for long-form reading, seven weights with true italics.
Low-contrast text serif built for the browser rather than adapted from print.
Production Type's screen-reading serif; seven weights each with a true cursive italic.
Compare Spectral
See how Spectral compares to other fonts side by side.
How to Use Spectral
Copy these code snippets to quickly add Spectral to your project.
CSS code for Spectral
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@200;300;400;500;600;700;800&display=swap');HTML code for Spectral
<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=Spectral:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">Tailwind code for Spectral
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'spectral': ['Spectral', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-spectral">Your text here</p>Next.js code for Spectral
// Using next/font (Next.js 13+)
import { Spectral } from 'next/font/google';
const spectral = Spectral({
subsets: ['latin'],
weight: ['200', '300', '400', '500', '600', '700', '800'],
});
export default function Component() {
return (
<p className={spectral.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Spectral'" }}>Your text</p>Expo and React Native code for Spectral
// Install: npx expo install @expo-google-fonts/spectral expo-font
import { useFonts, Spectral_400Regular } from '@expo-google-fonts/spectral';
export default function App() {
const [fontsLoaded] = useFonts({
Spectral_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Spectral_400Regular' }}>
Your text here
</Text>
);
}