Install FontSwap
Lora
About Lora
- Source
- Google Fonts ↗
- Classification
- 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 →Lora is a well-balanced contemporary serif typeface with roots in calligraphy. Designed by Cyreal and released in 2011, it has become one of the most popular free serif fonts for web and print, known for its elegant yet readable design.
History and Design
Lora was created by Cyreal type foundry, with design work by Olga Karpushina. The typeface blends calligraphic roots with modern construction, featuring moderate contrast, subtle curves, and well-proportioned letterforms. Its design draws inspiration from classical serif tradition while maintaining excellent screen readability.
Why Lora is Popular
Lora has earned its place as a go-to free alternative to premium serifs like Georgia, Sentinel, and Plantin. Its balanced design works equally well for headlines and body text, making it versatile for editorial and branding applications. The comprehensive Cyrillic support makes it particularly valuable for multilingual projects.
Technical Features
- Variable font: Weight axis from Regular (400) to Bold (700)
- True italics: Elegant cursive forms, not slanted romans
- Calligraphic details: Subtle brush-influenced curves
- Cyrillic support: Full Cyrillic and extended character sets
- OpenType features: Ligatures and contextual alternates
Best Use Cases
Lora excels in:
- Blog and editorial: Perfect for articles and long-form content
- Book design: Elegant yet readable for extended reading
- Magazine layouts: Sophisticated appearance for publications
- Wedding and event: Refined aesthetic for formal invitations
- Multilingual content: Excellent Cyrillic and Latin harmony
Usage Tips
For body text, use weight 400 at 16-18px with generous line height (1.6-1.8). Use weight 600-700 for headlines. The italics are particularly beautiful and work well for emphasis and pull quotes. Pairs excellently with clean sans-serifs like Open Sans or Raleway for a classic editorial combination.
Is Lora on Google Fonts?
Yes, Lora is available for free on Google Fonts. Get Lora on Google Fonts ↗
Alternative For (8)
Lora is a free alternative to the following premium fonts:
Calligraphy-influenced serif with variable support and warm reading character
Calligraphy-influenced serif with variable support and warm reading character
Calligraphy-influenced serif with variable support and strong screen rendering
Compare Lora
See how Lora compares to other fonts side by side.
Variable Font Axes
Lora is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
Font Pairings
Fonts that pair well with Lora based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Lora in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Lora.
@font-face {
font-family: 'Lora Fallback';
src: local('Georgia');
ascent-override: 100.6%;
descent-override: 27.4%;
line-gap-override: 0%;
size-adjust: 103.85%;
}How to Use Lora
Copy these code snippets to quickly add Lora to your project.
CSS code for Lora
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@100..900&display=swap');HTML code for Lora
<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=Lora:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Lora
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'lora': ['Lora', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-lora">Your text here</p>Next.js code for Lora
// Using next/font (Next.js 13+)
import { Lora } from 'next/font/google';
const lora = Lora({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={lora.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Lora'" }}>Your text</p>Expo and React Native code for Lora
// Install: npx expo install @expo-google-fonts/lora expo-font
import { useFonts, Lora_400Regular } from '@expo-google-fonts/lora';
export default function App() {
const [fontsLoaded] = useFonts({
Lora_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Lora_400Regular' }}>
Your text here
</Text>
);
}