Install FontSwap
Lobster Two
About Lobster Two
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400, 700
- 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 →Lobster Two is the family version of Lobster, and both come from Impallari Type. The original Lobster is a single style on Google Fonts. Lobster Two adds structure: Regular and Bold, each with an italic, for four styles you can mix inside one layout.
That extra range is the practical reason to choose it. A bold upright for a logo or headline, the italic for a tagline underneath and the regular for a short subhead give you a coherent retro voice without pairing two unrelated scripts. It works for café and bakery menus, event posters, packaging and party invitations, anywhere a playful display face is the point.
Limits worth knowing
- Display only. The decorative letterforms are made for large sizes; avoid body text, form labels and small UI.
- Latin only. The Google Fonts metadata lists no Latin Extended subset, so test copy that uses Central European or Vietnamese diacritics before you commit.
- Static files. There are no variable axes, just the four styles.
Lobster Two is free under the SIL Open Font License 1.1 on Google Fonts.
Is Lobster Two on Google Fonts?
Yes, Lobster Two is available for free on Google Fonts. Get Lobster Two on Google Fonts ↗
Compare Lobster Two
See how Lobster Two compares to other fonts side by side.
How to Use Lobster Two
Copy these code snippets to quickly add Lobster Two to your project.
CSS code for Lobster Two
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&display=swap');HTML code for Lobster Two
<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+Two:wght@400;700&display=swap" rel="stylesheet">Tailwind code for Lobster Two
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'lobster-two': ['"Lobster Two"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-lobster-two">Your text here</p>Next.js code for Lobster Two
// Using next/font (Next.js 13+)
import { Lobster_Two } from 'next/font/google';
const lobster_two = Lobster_Two({
subsets: ['latin'],
weight: ['400', '700'],
});
export default function Component() {
return (
<p className={lobster_two.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Lobster Two"' }}>Your text</p>Expo and React Native code for Lobster Two
// Install: npx expo install @expo-google-fonts/lobster-two expo-font
import { useFonts, Lobster_Two_400Regular } from '@expo-google-fonts/lobster-two';
export default function App() {
const [fontsLoaded] = useFonts({
Lobster_Two_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Lobster_Two_400Regular' }}>
Your text here
</Text>
);
}