Install FontSwap
Gabriela
About Gabriela
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- 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 →Gabriela is a display serif on Google Fonts with elegant, slightly decorative letterforms. Its single weight (Regular) features warm, flowing strokes and subtle ornamental details that give it a refined, feminine character.
Best Use Cases
Gabriela fits well in:
- Lifestyle branding: Beauty, wellness, fashion, home decor
- Event invitations: Weddings, galas, upscale events
- Editorial headers: Magazine section titles, feature article headlines
- Packaging: Premium product labels, artisan goods
Usage Tips
As a single-weight display font, Gabriela works best for headlines and short text at 24px+. Pair with a neutral sans-serif like Source Sans 3 or Lato for body text. The decorative details lose clarity below 18px, so keep it at display sizes for best results.
Is Gabriela on Google Fonts?
Yes, Gabriela is available for free on Google Fonts. Get Gabriela on Google Fonts ↗
Alternative For (3)
Gabriela is a free alternative to the following premium fonts:
Compare Gabriela
See how Gabriela compares to other fonts side by side.
How to Use Gabriela
Copy these code snippets to quickly add Gabriela to your project.
CSS code for Gabriela
@import url('https://fonts.googleapis.com/css2?family=Gabriela:wght@400&display=swap');HTML code for Gabriela
<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=Gabriela:wght@400&display=swap" rel="stylesheet">Tailwind code for Gabriela
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'gabriela': ['Gabriela', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-gabriela">Your text here</p>Next.js code for Gabriela
// Using next/font (Next.js 13+)
import { Gabriela } from 'next/font/google';
const gabriela = Gabriela({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={gabriela.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Gabriela'" }}>Your text</p>Expo and React Native code for Gabriela
// Install: npx expo install @expo-google-fonts/gabriela expo-font
import { useFonts, Gabriela_400Regular } from '@expo-google-fonts/gabriela';
export default function App() {
const [fontsLoaded] = useFonts({
Gabriela_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Gabriela_400Regular' }}>
Your text here
</Text>
);
}