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 (17)
Lora is a free alternative to the following premium fonts:
Calligraphy-influenced serif with variable support and warm reading character
Warm contemporary serif with calligraphic grace and versatile editorial performance
Calligraphy-influenced serif with variable support and warm reading character
Contemporary editorial serif with calligraphic warmth and versatile text performance
Calligraphy-influenced serif with variable support and strong screen rendering
Contemporary serif with calligraphic warmth as a modern editorial alternative
Calligraphically influenced editorial serif with elegant character
Contemporary editorial serif with calligraphic warmth matching Mercury's approachable tone
Closest editorial match with calligraphic warmth and contemporary refinement
Calligraphic serif with similar warmth and brushed stroke influence
Calligraphic serif with comparable warmth and editorial readability
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.
- Score
- 55 /100 Average
- File Size
- 402.6 KB Heavy
- Weights
- 9 (variable) + Italics
- Languages
- 5 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.5
- Cap Height Ratio
- 0.7
- Ascender
- 1006
- Descender
- -274
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>
);
}