Install FontSwap
Fira Sans
About Fira Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Features
- Italics
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 →Fira Sans is a humanist sans-serif designed by Carrois Type Design for Mozilla's Firefox OS. Its 18 styles (9 weights + italics) and extensive language support make it one of the most comprehensive free font families available.
Best Use Cases
Fira Sans shines in:
- Technical documentation: API references, developer guides, manuals
- Multilingual products: Apps serving diverse language markets
- Government and institutional: Public-facing sites requiring broad script support
- Print design: Reports, brochures, academic papers
Usage Tips
With 9 weights from Thin (100) to Black (900) plus full italic sets, Fira Sans handles any typographic hierarchy. Use 400 for body and 600-700 for headings. The extensive language support (Latin, Cyrillic, Greek, Vietnamese) makes it ideal for international projects. Pairs naturally with Fira Code and Fira Mono for technical content.
Is Fira Sans on Google Fonts?
Yes, Fira Sans is available for free on Google Fonts. Get Fira Sans on Google Fonts ↗
Alternative For (4)
Fira Sans is a free alternative to the following premium fonts:
Humanist sans with comprehensive weight and language support
Humanist sans from Mozilla with 18 styles and extensive language support
Compare Fira Sans
See how Fira Sans compares to other fonts side by side.
How to Use Fira Sans
Copy these code snippets to quickly add Fira Sans to your project.
CSS code for Fira Sans
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');HTML code for Fira Sans
<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=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Tailwind code for Fira Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'fira-sans': ['"Fira Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-fira-sans">Your text here</p>Next.js code for Fira Sans
// Using next/font (Next.js 13+)
import { Fira_Sans } from 'next/font/google';
const fira_sans = Fira_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={fira_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Fira Sans"' }}>Your text</p>Expo and React Native code for Fira Sans
// Install: npx expo install @expo-google-fonts/fira-sans expo-font
import { useFonts, Fira_Sans_400Regular } from '@expo-google-fonts/fira-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Fira_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Fira_Sans_400Regular' }}>
Your text here
</Text>
);
}