Install FontSwap
Be Vietnam Pro
About Be Vietnam Pro
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- 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 →Be Vietnam Pro is a neo-grotesk by Lâm Bảo, Tony Le and ViệtAnh Nguyễn, and its reason for existing is in the name. Vietnamese stacks diacritics, sometimes two marks on a single vowel, and many Western sans-serifs treat them as an afterthought: accents collide, crowd the line above, or look bolted on. The designers refined the Vietnamese letterforms with adaptive diacritic forms so tone marks sit cleanly and stay readable.
The rest of the design is deliberately unshowy. The Google Fonts description pitches it at tech companies and startups, and it behaves that way in practice: a neutral grotesk that reads well in interfaces and doesn't compete with photography or illustration.
One thing sets it apart from many recent Google Fonts releases. Be Vietnam Pro is not a variable font. It ships as 18 static files, nine weights from Thin (100) to Black (900), each with a true italic. If you load many weights that adds requests, so choose two or three and subset where you can.
Supported scripts are Latin, Latin Extended and Vietnamese. The family is free under the SIL Open Font License 1.1 on Google Fonts, with sources on GitHub.
Is Be Vietnam Pro on Google Fonts?
Yes, Be Vietnam Pro is available for free on Google Fonts. Get Be Vietnam Pro on Google Fonts ↗
Compare Be Vietnam Pro
See how Be Vietnam Pro compares to other fonts side by side.
How to Use Be Vietnam Pro
Copy these code snippets to quickly add Be Vietnam Pro to your project.
CSS code for Be Vietnam Pro
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@100;200;300;400;500;600;700;800;900&display=swap');HTML code for Be Vietnam Pro
<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=Be+Vietnam+Pro:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Tailwind code for Be Vietnam Pro
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'be-vietnam-pro': ['"Be Vietnam Pro"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-be-vietnam-pro">Your text here</p>Next.js code for Be Vietnam Pro
// Using next/font (Next.js 13+)
import { Be_Vietnam_Pro } from 'next/font/google';
const be_vietnam_pro = Be_Vietnam_Pro({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={be_vietnam_pro.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Be Vietnam Pro"' }}>Your text</p>Expo and React Native code for Be Vietnam Pro
// Install: npx expo install @expo-google-fonts/be-vietnam-pro expo-font
import { useFonts, Be_Vietnam_Pro_400Regular } from '@expo-google-fonts/be-vietnam-pro';
export default function App() {
const [fontsLoaded] = useFonts({
Be_Vietnam_Pro_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Be_Vietnam_Pro_400Regular' }}>
Your text here
</Text>
);
}