Install FontSwap
Sacramento
About Sacramento
- 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 →Sacramento is a flowing, brush-style script typeface designed by Astigmatic. Released in 2012, it captures the spontaneous elegance of handwritten brush lettering with a California-inspired aesthetic.
History and Design
Astigmatic (Brian J. Bonislawsky) designed Sacramento to evoke the casual elegance of mid-century California signage and hand-lettered menus. The typeface features smooth, continuous strokes that flow naturally from letter to letter, creating a sense of effortless sophistication. Its design balances readability with decorative appeal.
Why Sacramento is Popular
Sacramento has become popular for its balance of elegance and accessibility. It serves as a free alternative to premium brush scripts used in restaurant branding, wedding design, and lifestyle content. The warm, inviting character suits projects that want to convey relaxed sophistication. Many designers appreciate its authenticity and natural flowing rhythm.
Technical Features
- Single weight: Carefully crafted Regular weight
- Flowing connections: Smooth letter joins
- Brush character: Natural stroke variations
- Extended Latin: Support for European languages
- Balanced x-height: Maintains readability
Best Use Cases
Sacramento excels in:
- Restaurant branding: Menus and signage
- Lifestyle blogs: Headers and accent text
- Wedding design: Casual-elegant invitations
- Product packaging: Artisanal and boutique goods
- Social media: Inviting, personal graphics
Usage Tips
Use Sacramento at large sizes (24px+) for best legibility. The single weight means emphasis comes from size and color variations. Limit to headlines and short text passages. Pairs well with clean serif or sans-serif fonts for body text. The flowing character works best on light backgrounds where the thin strokes remain visible.
Is Sacramento on Google Fonts?
Yes, Sacramento is available for free on Google Fonts. Get Sacramento on Google Fonts ↗
Alternative For (1)
Sacramento is a free alternative to the following premium fonts:
Compare Sacramento
See how Sacramento compares to other fonts side by side.
Font Pairings
Fonts that pair well with Sacramento based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Sacramento in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Sacramento.
@font-face {
font-family: 'Sacramento Fallback';
src: local('Arial');
ascent-override: 93.02%;
descent-override: 52.93%;
line-gap-override: 0%;
size-adjust: 59.04%;
}How to Use Sacramento
Copy these code snippets to quickly add Sacramento to your project.
CSS code for Sacramento
@import url('https://fonts.googleapis.com/css2?family=Sacramento:wght@400&display=swap');HTML code for Sacramento
<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=Sacramento:wght@400&display=swap" rel="stylesheet">Tailwind code for Sacramento
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'sacramento': ['Sacramento', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-sacramento">Your text here</p>Next.js code for Sacramento
// Using next/font (Next.js 13+)
import { Sacramento } from 'next/font/google';
const sacramento = Sacramento({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={sacramento.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Sacramento'" }}>Your text</p>Expo and React Native code for Sacramento
// Install: npx expo install @expo-google-fonts/sacramento expo-font
import { useFonts, Sacramento_400Regular } from '@expo-google-fonts/sacramento';
export default function App() {
const [fontsLoaded] = useFonts({
Sacramento_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Sacramento_400Regular' }}>
Your text here
</Text>
);
}