Install FontSwap
Alexandria
About Alexandria
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Alexandria is a bilingual Arabic-Latin sans-serif typeface available on Google Fonts. It provides harmonized Arabic and Latin character sets in a modern, geometric style with a full 9-weight variable font range.
History and Design
Alexandria was designed to bridge Arabic and Latin typography in a single cohesive family. The Arabic characters follow a simplified geometric approach that departs from traditional calligraphic Arabic type, making it well-suited for modern digital interfaces and branding that spans both script systems. The Latin characters complement the Arabic with matching proportions and weight distribution.
Why Alexandria Stands Out
Bilingual Arabic-Latin fonts with broad weight ranges are rare in the free font world. Alexandria fills this gap with 9 weights from Thin to Black, all available as a single variable font. The geometric Arabic design makes it particularly useful for contemporary UI and branding work where both scripts need to coexist harmoniously.
Technical Features
- Variable font: Full weight axis from Thin (100) to Black (900)
- Bilingual design: Harmonized Arabic and Latin character sets
- Right-to-left support: Full RTL layout support for Arabic text
- 9 static weights: Available as individual files or single variable font
Best Use Cases
Alexandria excels in:
- Bilingual interfaces: Applications and websites serving Arabic and Latin-script audiences
- Middle Eastern branding: Modern brand identity for Arabic-speaking markets
- Corporate documents: Professional bilingual reports and presentations
- Web applications: Variable font efficiency for multilingual responsive designs
Usage Tips
Use weight 400 for Arabic body text and 700 for headings. The variable font version is efficient for web use — a single file serves all weights. For best results in mixed Arabic-Latin layouts, test line-height and vertical alignment carefully, as Arabic and Latin baselines differ. Pair with a serif like Noto Naskh Arabic for editorial contrast.
Is Alexandria on Google Fonts?
Yes, Alexandria is available for free on Google Fonts. Get Alexandria on Google Fonts ↗
Compare Alexandria
See how Alexandria compares to other fonts side by side.
Variable Font Axes
Alexandria is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Alexandria
Copy these code snippets to quickly add Alexandria to your project.
CSS code for Alexandria
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');HTML code for Alexandria
<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=Alexandria:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Alexandria
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'alexandria': ['Alexandria', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-alexandria">Your text here</p>Next.js code for Alexandria
// Using next/font (Next.js 13+)
import { Alexandria } from 'next/font/google';
const alexandria = Alexandria({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={alexandria.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Alexandria'" }}>Your text</p>Expo and React Native code for Alexandria
// Install: npx expo install @expo-google-fonts/alexandria expo-font
import { useFonts, Alexandria_400Regular } from '@expo-google-fonts/alexandria';
export default function App() {
const [fontsLoaded] = useFonts({
Alexandria_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Alexandria_400Regular' }}>
Your text here
</Text>
);
}