Install FontSwap
Lobster
About Lobster
- 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 →Lobster is a bold script typeface designed by Pablo Impallari for Google Fonts. Released in 2010, Lobster quickly became one of the most popular free display fonts, offering a warm, retro-inspired script with connected letterforms and friendly personality.
History and Design
Pablo Impallari designed Lobster during the early expansion of Google Fonts, when the platform was establishing its library of quality open-source typefaces. The design draws inspiration from 1960s American advertising scripts—the kind that appeared on bowling alleys, diners, and classic car dealerships.
Lobster's distinctive character comes from its connected letterforms and ball terminals. The script flows naturally from letter to letter, creating a handwritten quality while maintaining typographic consistency. Multiple stylistic alternates provide variation to prevent identical letter patterns.
Technical Features
- Single bold weight: Optimized for display use
- Connected script: Flowing letterform connections
- Stylistic alternates: Varied letterforms available
- Cyrillic support: Extended language coverage
- Web optimized: Clean rendering on screens
Why Lobster Excels
Lobster succeeds by offering genuine personality in a usable package. Its warm, nostalgic character makes it immediately recognizable, while careful design ensures it remains legible. The script connections are natural rather than forced, creating authentic handwritten rhythm.
Best Use Cases
Lobster excels in:
- Casual branding: Friendly, approachable identities
- Food and beverage: Restaurant signage and menus
- Retro themes: 1950s-60s design aesthetics
- Personal projects: Invitations and creative work
Usage Tips
Lobster works best for short text—headlines, logos, and display applications. The bold weight demands attention but can overwhelm in extended use. Pair with clean sans-serifs for balance. While extremely popular (sometimes cited as overused), Lobster remains effective when deployed thoughtfully. The stylistic alternates help create variation when multiple words appear together. Consider Lobster Two for a lighter alternative with similar aesthetic.
Is Lobster on Google Fonts?
Yes, Lobster is available for free on Google Fonts. Get Lobster on Google Fonts ↗
Alternative For (10)
Lobster is a free alternative to the following premium fonts:
The original Lobster, available free on Google Fonts with bolder weight
Compare Lobster
See how Lobster compares to other fonts side by side.
Font Pairings
Fonts that pair well with Lobster based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Lobster in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Lobster.
@font-face {
font-family: 'Lobster Fallback';
src: local('Arial');
ascent-override: 100%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 96.42%;
}How to Use Lobster
Copy these code snippets to quickly add Lobster to your project.
CSS code for Lobster
@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400&display=swap');HTML code for Lobster
<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=Lobster:wght@400&display=swap" rel="stylesheet">Tailwind code for Lobster
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'lobster': ['Lobster', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-lobster">Your text here</p>Next.js code for Lobster
// Using next/font (Next.js 13+)
import { Lobster } from 'next/font/google';
const lobster = Lobster({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={lobster.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Lobster'" }}>Your text</p>Expo and React Native code for Lobster
// Install: npx expo install @expo-google-fonts/lobster expo-font
import { useFonts, Lobster_400Regular } from '@expo-google-fonts/lobster';
export default function App() {
const [fontsLoaded] = useFonts({
Lobster_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Lobster_400Regular' }}>
Your text here
</Text>
);
}