Install FontSwap
Cardo
About Cardo
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400, 700
- 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 →Cardo was not designed for websites. David Perry built it as a large Unicode font for classicists, Biblical scholars, medievalists and linguists: people who need Greek, Hebrew and historical alphabets in the same document as their English footnotes. The Google Fonts metadata lists Gothic, Old Italic and Runic subsets alongside Latin, Greek Extended and Hebrew, which tells you how seriously it takes that brief.
The letterforms are Old Style, with a bookish rhythm that settles comfortably into long paragraphs. According to its Google Fonts description, Cardo includes ligatures, old style numerals and true small capitals, so it can carry properly typeset academic text without faking those features.
Before you use it
- Only three styles exist on Google Fonts: Regular, Italic and Bold. There is no bold italic and no variable version.
- It is at its best in long-form reading: journals, theses, digital editions of classical texts, library and museum collections.
- For interfaces or display work it can feel dated. Pair it with a restrained sans for headings and navigation.
Cardo is free under the SIL Open Font License 1.1 and available from Google Fonts.
Is Cardo on Google Fonts?
Yes, Cardo is available for free on Google Fonts. Get Cardo on Google Fonts ↗
Compare Cardo
See how Cardo compares to other fonts side by side.
How to Use Cardo
Copy these code snippets to quickly add Cardo to your project.
CSS code for Cardo
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');HTML code for Cardo
<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=Cardo:wght@400;700&display=swap" rel="stylesheet">Tailwind code for Cardo
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'cardo': ['Cardo', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-cardo">Your text here</p>Next.js code for Cardo
// Using next/font (Next.js 13+)
import { Cardo } from 'next/font/google';
const cardo = Cardo({
subsets: ['latin'],
weight: ['400', '700'],
});
export default function Component() {
return (
<p className={cardo.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Cardo'" }}>Your text</p>Expo and React Native code for Cardo
// Install: npx expo install @expo-google-fonts/cardo expo-font
import { useFonts, Cardo_400Regular } from '@expo-google-fonts/cardo';
export default function App() {
const [fontsLoaded] = useFonts({
Cardo_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Cardo_400Regular' }}>
Your text here
</Text>
);
}