Install FontSwap
Elsie
About Elsie
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400, 900
- Features
- Standard
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 →Elsie is a decorative display typeface designed by Alejandro Inler from Typemade. The design features distinctive swash elements and Art Nouveau-inspired details that give it a romantic, vintage character.
Design Characteristics
Elsie combines traditional serif structures with flowing, ornamental details. The typeface features distinctive terminals, elegant curves, and decorative flourishes that evoke early 20th-century typography. Its theatrical quality makes it ideal for headlines and display use.
Technical Features
- Two weights: Regular and Black for contrast
- Extended Latin support: Comprehensive character coverage
- Swash-inspired design: Built-in decorative elements
- Display optimization: Designed for larger sizes
Best Use Cases
Elsie excels in:
- Wedding stationery: Invitations, save-the-dates, programs
- Luxury packaging: Cosmetics, perfumes, specialty foods
- Editorial headlines: Fashion and lifestyle publications
- Event branding: Galas, special occasions, celebrations
Is Elsie on Google Fonts?
Yes, Elsie is available for free on Google Fonts. Get Elsie on Google Fonts ↗
Alternative For (1)
Elsie is a free alternative to the following premium fonts:
Compare Elsie
See how Elsie compares to other fonts side by side.
Font Pairings
Fonts that pair well with Elsie based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Elsie in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Elsie.
@font-face {
font-family: 'Elsie Fallback';
src: local('Arial');
ascent-override: 87.8%;
descent-override: 27.4%;
line-gap-override: 0%;
size-adjust: 98.54%;
}How to Use Elsie
Copy these code snippets to quickly add Elsie to your project.
CSS code for Elsie
@import url('https://fonts.googleapis.com/css2?family=Elsie:wght@400;900&display=swap');HTML code for Elsie
<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=Elsie:wght@400;900&display=swap" rel="stylesheet">Tailwind code for Elsie
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'elsie': ['Elsie', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-elsie">Your text here</p>Next.js code for Elsie
// Using next/font (Next.js 13+)
import { Elsie } from 'next/font/google';
const elsie = Elsie({
subsets: ['latin'],
weight: ['400', '900'],
});
export default function Component() {
return (
<p className={elsie.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Elsie'" }}>Your text</p>Expo and React Native code for Elsie
// Install: npx expo install @expo-google-fonts/elsie expo-font
import { useFonts, Elsie_400Regular } from '@expo-google-fonts/elsie';
export default function App() {
const [fontsLoaded] = useFonts({
Elsie_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Elsie_400Regular' }}>
Your text here
</Text>
);
}