Install FontSwap
Syne
About Syne
- 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 →Syne was created in 2017 for Synesthésie, an art centre in Saint-Denis, a suburb of Paris. Bonjour Monde conceptualised it and Lucas Descroix designed it with the help of Arman Mohtadji; George Triantafyllakos added a Greek script in March 2022.
The family explores atypical associations of weights and styles. Syne Regular is a fairly archetypal geometric sans that the art centre could use every day. As the weight increases, though, the letters also get wider, which forces radical layout decisions. You can't treat the weight axis as a neutral emphasis control here: every step changes both the texture and the line length.
That behaviour is exactly why designers pick it. Use the heavy end for posters, exhibition graphics, music and cultural branding, where the wide, dense shapes create an immediate identity, and keep Regular for small supporting text. Test your longest headline at the boldest weight before you lock a layout.
On Google Fonts, Syne is a variable font from Regular (400) to ExtraBold (800) with no italics, covering Latin, Latin Extended and Greek. Google Fonts lists it under Display as well as Sans Serif. It is free under the SIL Open Font License 1.1.
Is Syne on Google Fonts?
Yes, Syne is available for free on Google Fonts. Get Syne on Google Fonts ↗
Compare Syne
See how Syne compares to other fonts side by side.
Variable Font Axes
Syne is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 800 |
How to Use Syne
Copy these code snippets to quickly add Syne to your project.
CSS code for Syne
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@100..900&display=swap');HTML code for Syne
<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=Syne:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Syne
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'syne': ['Syne', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-syne">Your text here</p>Next.js code for Syne
// Using next/font (Next.js 13+)
import { Syne } from 'next/font/google';
const syne = Syne({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={syne.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Syne'" }}>Your text</p>Expo and React Native code for Syne
// Install: npx expo install @expo-google-fonts/syne expo-font
import { useFonts, Syne_400Regular } from '@expo-google-fonts/syne';
export default function App() {
const [fontsLoaded] = useFonts({
Syne_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Syne_400Regular' }}>
Your text here
</Text>
);
}