Install FontSwap
Karla
About Karla
- 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 →Karla is a grotesque sans-serif by Jonny Pinhorn and one of the longer-serving families in the Google Fonts library, added in 2012. It has since been expanded into a variable font with a weight axis from ExtraLight (200) to ExtraBold (800), and its language support now covers Western, Central and South-Eastern European languages.
Why reach for it? Karla sits in a useful middle ground: plainer than a geometric sans, less corporate than a polished neo-grotesque. That suits personal sites, portfolios, small publications and side projects that want a sans with some character but no strong brand association. The heavier weights handle short headlines, and 400 is comfortable for body text on screen.
A few practical points:
- Latin and Latin Extended only, so no Cyrillic, Greek or Vietnamese.
- The italic is a separate variable file on Google Fonts, so load both files if you need emphasis.
- Seven weights in one variable file let you fine-tune hierarchy without extra requests.
Karla is free under the SIL Open Font License 1.1 on Google Fonts, with sources maintained on GitHub.
Is Karla on Google Fonts?
Yes, Karla is available for free on Google Fonts. Get Karla on Google Fonts ↗
Compare Karla
See how Karla compares to other fonts side by side.
Variable Font Axes
Karla is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
How to Use Karla
Copy these code snippets to quickly add Karla to your project.
CSS code for Karla
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@100..900&display=swap');HTML code for Karla
<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=Karla:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Karla
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'karla': ['Karla', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-karla">Your text here</p>Next.js code for Karla
// Using next/font (Next.js 13+)
import { Karla } from 'next/font/google';
const karla = Karla({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={karla.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Karla'" }}>Your text</p>Expo and React Native code for Karla
// Install: npx expo install @expo-google-fonts/karla expo-font
import { useFonts, Karla_400Regular } from '@expo-google-fonts/karla';
export default function App() {
const [fontsLoaded] = useFonts({
Karla_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Karla_400Regular' }}>
Your text here
</Text>
);
}