Install FontSwap
Sevillana
About Sevillana
- Source
- Google Fonts ↗
- Classification
- display
- 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 →Sevillana is an ornamental display typeface designed by Brownfox that draws on the decorative lettering traditions of southern Spain. The design incorporates gothic and calligraphic elements into a highly expressive display face, with flourished letterforms that reference both blackletter heritage and Iberian decorative arts.
History and Design
Sevillana takes its name and visual inspiration from the Andalusian capital of Seville, a city known for its rich artistic traditions blending Moorish, Gothic, and Renaissance influences. The typeface channels this cultural complexity into letterforms that combine angular gothic construction with elaborate ornamental flourishes. The result is a display face that sits at the decorative end of the blackletter-adjacent spectrum — more ornate and expressive than traditional Fraktur, but sharing the essential weight and angular character of gothic scripts.
The design features flowing curves, decorative terminals, and the kind of elaborate stroke modulation associated with formal calligraphic display. While not a strict blackletter in the German Fraktur sense, Sevillana's gothic roots are evident in its angular construction, heavy stroke weight, and the dense visual texture it creates. The typeface works as a decorative alternative to traditional blackletter for contexts that benefit from ornamental expressiveness.
Best For
- Decorative display text for cultural and artistic events
- Wedding invitations and formal stationery with gothic elegance
- Restaurant and hospitality branding with Old World character
- Wine and spirits label design requiring ornamental typography
- Editorial feature headlines needing dramatic visual impact
Tips
Sevillana works best at large display sizes where its ornamental details are fully visible. Use for single words, short phrases, or initial capitals rather than extended text. The typeface's elaborate forms reduce legibility at small sizes, so reserve it for primary display elements. Pair with a clean serif or sans-serif body text face to provide readable contrast. Sevillana's cultural associations make it particularly effective for projects with Mediterranean, historical, or artistic themes.
Is Sevillana on Google Fonts?
Yes, Sevillana is available for free on Google Fonts. Get Sevillana on Google Fonts ↗
Alternative For (3)
Sevillana is a free alternative to the following premium fonts:
Ornamental display with decorative gothic elements
Compare Sevillana
See how Sevillana compares to other fonts side by side.
Font Pairings
Fonts that pair well with Sevillana based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Sevillana in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Sevillana.
@font-face {
font-family: 'Sevillana Fallback';
src: local('Arial');
ascent-override: 100.68%;
descent-override: 35.01%;
line-gap-override: 0%;
size-adjust: 80.98%;
}How to Use Sevillana
Copy these code snippets to quickly add Sevillana to your project.
CSS code for Sevillana
@import url('https://fonts.googleapis.com/css2?family=Sevillana:wght@400&display=swap');HTML code for Sevillana
<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=Sevillana:wght@400&display=swap" rel="stylesheet">Tailwind code for Sevillana
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'sevillana': ['Sevillana', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-sevillana">Your text here</p>Next.js code for Sevillana
// Using next/font (Next.js 13+)
import { Sevillana } from 'next/font/google';
const sevillana = Sevillana({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={sevillana.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Sevillana'" }}>Your text</p>Expo and React Native code for Sevillana
// Install: npx expo install @expo-google-fonts/sevillana expo-font
import { useFonts, Sevillana_400Regular } from '@expo-google-fonts/sevillana';
export default function App() {
const [fontsLoaded] = useFonts({
Sevillana_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Sevillana_400Regular' }}>
Your text here
</Text>
);
}