Install FontSwap
Archivo
About Archivo
- 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 →Archivo is a grotesque from Omnibus-Type, designed by Héctor Gatti with the Omnibus-Type team. It started life as a headline face, and its roots show: the Google Fonts description calls it reminiscent of late nineteenth-century American typefaces, the sturdy grotesques that once filled posters and newspaper mastheads.
The reason to look at it today is the 2021 variable upgrade. Archivo now ships two axes, weight from Thin (100) to Black (900) and width from 62 to 125, so a single file covers everything from ExtraCondensed to Expanded. In a dense dashboard you can pull the width in; in a hero headline you can push it out and up in weight, and the family still reads as one voice. Italics are included as a separate variable file.
Archivo was built to work in print and on screen at the same time, which makes it a sensible pick for organisations that publish reports, signage and web pages from one type system. Use the condensed end for tables, navigation and anywhere horizontal space is tight, and save the expanded widths for short display lines.
Script coverage on Google Fonts is Latin, Latin Extended and Vietnamese. Archivo is free under the SIL Open Font License 1.1.
Is Archivo on Google Fonts?
Yes, Archivo is available for free on Google Fonts. Get Archivo on Google Fonts ↗
Compare Archivo
See how Archivo compares to other fonts side by side.
Variable Font Axes
Archivo is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| wdth | 62 | 100 | 125 |
How to Use Archivo
Copy these code snippets to quickly add Archivo to your project.
CSS code for Archivo
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100..900&display=swap');HTML code for Archivo
<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=Archivo:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Archivo
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'archivo': ['Archivo', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-archivo">Your text here</p>Next.js code for Archivo
// Using next/font (Next.js 13+)
import { Archivo } from 'next/font/google';
const archivo = Archivo({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={archivo.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Archivo'" }}>Your text</p>Expo and React Native code for Archivo
// Install: npx expo install @expo-google-fonts/archivo expo-font
import { useFonts, Archivo_400Regular } from '@expo-google-fonts/archivo';
export default function App() {
const [fontsLoaded] = useFonts({
Archivo_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Archivo_400Regular' }}>
Your text here
</Text>
);
}