Install FontSwap
Dancing Script
About Dancing Script
- Source
- Google Fonts ↗
- Classification
- display
- 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 →Dancing Script is a lively, casual script typeface designed by Pablo Impallari. Released in 2011, it captures the spontaneous energy of informal handwriting with bouncing baselines and playful letterforms.
History and Design
Pablo Impallari designed Dancing Script to evoke the free-spirited character of 1950s casual script lettering. The typeface features varying baselines that create a dancing rhythm, hence the name. Unlike formal scripts, Dancing Script maintains legibility while conveying personality and warmth through its animated letterforms.
Why Dancing Script is Popular
Dancing Script has become a favorite for designers seeking a casual, friendly script alternative to more formal options. It serves as a free alternative to premium casual scripts, offering authenticity without the price tag. Its approachable character makes it suitable for personal branding, casual invitations, and creative projects.
Technical Features
- Variable font: Weight axis from Regular (400) to Bold (700)
- Bouncing baseline: Creates dynamic, lively rhythm
- Connecting letters: Smooth joins between characters
- Casual character: Friendly, informal appearance
- Extended Latin: Support for Vietnamese and European languages
Best Use Cases
Dancing Script excels in:
- Casual invitations: Birthday parties, casual events
- Personal branding: Blogs, portfolios, creative businesses
- Food and beverage: Restaurant menus, coffee shop branding
- Social media: Friendly, approachable graphics
- Greeting cards: Informal notes and messages
Usage Tips
Use Dancing Script at larger sizes (20px+) for legibility. Weight 500-600 offers good balance of personality and readability. Limit to headlines, signatures, and accent text rather than body copy. Pairs well with clean sans-serifs like Lato or Open Sans for contrast. The variable weight allows for subtle emphasis without losing the script character.
Is Dancing Script on Google Fonts?
Yes, Dancing Script is available for free on Google Fonts. Get Dancing Script on Google Fonts ↗
Alternative For (3)
Dancing Script is a free alternative to the following premium fonts:
Casual calligraphic script with variable weight for flexible display use
Compare Dancing Script
See how Dancing Script compares to other fonts side by side.
Variable Font Axes
Dancing Script is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
Font Pairings
Fonts that pair well with Dancing Script based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Dancing Script in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Dancing Script.
@font-face {
font-family: 'Dancing Script Fallback';
src: local('Arial');
ascent-override: 92%;
descent-override: 28%;
line-gap-override: 0%;
size-adjust: 64.02%;
}How to Use Dancing Script
Copy these code snippets to quickly add Dancing Script to your project.
CSS code for Dancing Script
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@100..900&display=swap');HTML code for Dancing Script
<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=Dancing+Script:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Dancing Script
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'dancing-script': ['"Dancing Script"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-dancing-script">Your text here</p>Next.js code for Dancing Script
// Using next/font (Next.js 13+)
import { Dancing_Script } from 'next/font/google';
const dancing_script = Dancing_Script({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={dancing_script.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Dancing Script"' }}>Your text</p>Expo and React Native code for Dancing Script
// Install: npx expo install @expo-google-fonts/dancing-script expo-font
import { useFonts, Dancing_Script_400Regular } from '@expo-google-fonts/dancing-script';
export default function App() {
const [fontsLoaded] = useFonts({
Dancing_Script_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Dancing_Script_400Regular' }}>
Your text here
</Text>
);
}