Install FontSwap
Albert Sans
About Albert Sans
- 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 →Albert Sans comes from Danish type designer Andreas Rasmussen of a.Foundry, and it wears its regional influence openly. The Google Fonts description traces it to the type characteristics of Scandinavian architects and designers of the early twentieth century, which explains the calm, slightly architectural geometry: round bowls, even strokes and none of the fussy detailing that dates a typeface quickly.
On Google Fonts it is a single variable family with a weight axis from Thin (100) to Black (900), plus matching italics. That is a wider range than most projects need, and that is the point. The hairline weights can carry a large headline while 400 and 500 do the reading work underneath.
Where it fits
- Product and marketing sites that want geometric order without the coldness of a strict circle-and-line design
- Architecture, interiors and design studios, where the Scandinavian modernist reference is a natural match
- Brand systems that need one family to stretch from display sizes down to captions
Script coverage is Latin and Latin Extended only. There is no Cyrillic or Greek, so check your markets before committing. Albert Sans is free under the SIL Open Font License 1.1 and can be self-hosted or loaded straight from Google Fonts.
Is Albert Sans on Google Fonts?
Yes, Albert Sans is available for free on Google Fonts. Get Albert Sans on Google Fonts ↗
Compare Albert Sans
See how Albert Sans compares to other fonts side by side.
Variable Font Axes
Albert Sans is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Albert Sans
Copy these code snippets to quickly add Albert Sans to your project.
CSS code for Albert Sans
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@100..900&display=swap');HTML code for Albert Sans
<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=Albert+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Albert Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'albert-sans': ['"Albert Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-albert-sans">Your text here</p>Next.js code for Albert Sans
// Using next/font (Next.js 13+)
import { Albert_Sans } from 'next/font/google';
const albert_sans = Albert_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={albert_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Albert Sans"' }}>Your text</p>Expo and React Native code for Albert Sans
// Install: npx expo install @expo-google-fonts/albert-sans expo-font
import { useFonts, Albert_Sans_400Regular } from '@expo-google-fonts/albert-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Albert_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Albert_Sans_400Regular' }}>
Your text here
</Text>
);
}