Install FontSwap
Epilogue
About Epilogue
- Source
- Google Fonts ↗
- Classification
- sans-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 →Epilogue is a sans-serif led by Tyler Finck, the type designer behind Etcetera Type Co in Ithaca, New York. Its Google Fonts description is unusually brief (a weight axis, nine weights, upright and italic, broad Latin support) and the design is similarly matter-of-fact.
What you get is a flexible grotesque whose character shifts across its range. The heaviest weights are dense enough for posters and big headlines, while the middle of the axis is calm enough to set paragraphs. That spread lets one family handle a whole editorial or portfolio site without a second typeface.
Specs at a glance:
- Variable weight axis from Thin (100) to Black (900), with a matching italic
- Latin, Latin Extended and Vietnamese
- Two variable files on Google Fonts instead of eighteen statics
A sensible starting system is ExtraBold or Black for display, 400 for body text, and 500 or 600 for labels and captions. If you need Cyrillic or Greek, look elsewhere; Epilogue stays within the Latin script.
Epilogue is free on Google Fonts under the SIL Open Font License 1.1, and the sources are on GitHub under the Etcetera-Type-Co organisation.
Is Epilogue on Google Fonts?
Yes, Epilogue is available for free on Google Fonts. Get Epilogue on Google Fonts ↗
Compare Epilogue
See how Epilogue compares to other fonts side by side.
Variable Font Axes
Epilogue is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Epilogue
Copy these code snippets to quickly add Epilogue to your project.
CSS code for Epilogue
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@100..900&display=swap');HTML code for Epilogue
<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=Epilogue:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Epilogue
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'epilogue': ['Epilogue', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-epilogue">Your text here</p>Next.js code for Epilogue
// Using next/font (Next.js 13+)
import { Epilogue } from 'next/font/google';
const epilogue = Epilogue({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={epilogue.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Epilogue'" }}>Your text</p>Expo and React Native code for Epilogue
// Install: npx expo install @expo-google-fonts/epilogue expo-font
import { useFonts, Epilogue_400Regular } from '@expo-google-fonts/epilogue';
export default function App() {
const [fontsLoaded] = useFonts({
Epilogue_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Epilogue_400Regular' }}>
Your text here
</Text>
);
}