Install FontSwap
Aladin
About Aladin
- 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 →Aladin is a calligraphic display typeface designed by Angel Koziupa at Sudtipos. Its airy counters, friendly terminals, and subtle Middle Eastern calligraphic influence give it a warm, approachable character suited to packaging and poster work.
Best Use Cases
Aladin fits well in:
- Packaging and labels: Food, beverage, and artisan product branding
- Event posters: Festivals, cultural events, entertainment
- Book jackets: Titles with a vintage or handcrafted feel
- Restaurant menus: Headings and feature items
Usage Tips
As a single-weight display font, Aladin should be reserved for headlines and short text. Pair it with a neutral body font like Open Sans or Lato for readable running text. Avoid using it below 18px — its calligraphic details lose clarity at small sizes.
Is Aladin on Google Fonts?
Yes, Aladin is available for free on Google Fonts. Get Aladin on Google Fonts ↗
Alternative For (2)
Aladin is a free alternative to the following premium fonts:
Calligraphic display with warm, approachable character for packaging and posters
Compare Aladin
See how Aladin compares to other fonts side by side.
How to Use Aladin
Copy these code snippets to quickly add Aladin to your project.
CSS code for Aladin
@import url('https://fonts.googleapis.com/css2?family=Aladin:wght@400&display=swap');HTML code for Aladin
<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=Aladin:wght@400&display=swap" rel="stylesheet">Tailwind code for Aladin
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'aladin': ['Aladin', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-aladin">Your text here</p>Next.js code for Aladin
// Using next/font (Next.js 13+)
import { Aladin } from 'next/font/google';
const aladin = Aladin({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={aladin.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Aladin'" }}>Your text</p>Expo and React Native code for Aladin
// Install: npx expo install @expo-google-fonts/aladin expo-font
import { useFonts, Aladin_400Regular } from '@expo-google-fonts/aladin';
export default function App() {
const [fontsLoaded] = useFonts({
Aladin_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Aladin_400Regular' }}>
Your text here
</Text>
);
}