Google Fonts
Google Fonts
Many free fonts, including fonts with good Vietnamese support.
A free font library, with many fonts fully supporting Vietnamese.
Overview
Google Fonts is a font library for web and design, with fonts licensed to allow redistribution. Most fonts use the SIL Open Font License, some use Apache 2 or the Ubuntu Font License, and each font has its own license file.
The most common way to use it is to insert a link tag to Google's CSS API into the web page and then declare the font name in CSS. Because the licenses allow redistribution, you can also self-host the fonts on your own server.
For Vietnamese businesses, the key point is choosing a font that supports Vietnamese. For example, when calling the Be Vietnam Pro font through the CSS API, Google returns the vietnamese character set as well, so accented text displays correctly.
Highlights
Open licenses
Most fonts use the SIL Open Font License, which allows redistribution under its terms.
Quick embedding with the CSS API
A single link tag to fonts.googleapis.com is all it takes to use them on a website.
Variable font support
CSS API v2 lets you request a weight range, for example wght@200..900.
Load-speed optimization
The display=swap parameter controls how text shows while the font loads, and the text= parameter creates a small font file for a logo or heading.
Self-hosting possible
The licenses allow downloading fonts and serving them from your own server.
Vietnamese character set
Many fonts have a vietnamese subset to display accented text.
What it's for
Business websites
Choose heading and body fonts that support Vietnamese so the site looks professional and is easy to read.
Marketing materials
Use the same font on the website, banners and slides for consistent branding.
Fast-loading landing pages
Embed fonts with display=swap so text appears immediately instead of a blank page waiting for the font.
Logos and headings
Use the text= parameter to load only the characters you need.
How to use it
- 1
Choose a font that supports Vietnamese
Find a font on fonts.google.com and check that it has the Vietnamese character set.
- 2
Embed it in the page
Add a link tag to https://fonts.googleapis.com/css2?family=Font+Name&display=swap in the head.
- 3
Declare it in CSS
Set font-family to the font name, with a fallback such as sans-serif at the end.
- 4
Optimize when needed
Request only the weights you need, or self-host the font to control speed.
Video guides
Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)
leerob
How to Use Google Fonts
Aki Stepinska
Real-world example
A roasted coffee brand in Buon Ma Thuot redoes its website and notices the old font breaks Vietnamese diacritics. The web builder picks a font with the vietnamese character set for body text and another for headings on Google Fonts, embeds them with the CSS API plus display=swap, then uses the same two fonts on banners and printed menus so the brand stays consistent.
Tips & notes
Always test accented text
Type a full Vietnamese sentence with all diacritics before settling on a font.
Read each font's license
Each font has its own license; check it before using for commercial purposes or modifying the font.
Limit the number of weights
Requesting fewer weights makes the page load faster.
Always have a fallback font
Add sans-serif or serif at the end of font-family in case the web font fails to load.
FAQ
Is Google Fonts free?
The fonts are licensed to allow redistribution, mostly under the SIL Open Font License. Read the license that comes with each font.
Can I self-host fonts?
Yes, the licenses allow redistribution, so you can download fonts and serve them from your own server.
How do I know a font supports Vietnamese?
Check the font's languages section on Google Fonts or type accented Vietnamese text in the preview.
Useful links
Want to apply this in your business?
2dm looks at your workflows, picks the right tools and sets them up with your team. The first call is free.
Same topic
shadcn/ui
4.5
A set of UI components for React and Tailwind CSS: copy the code into your project, then customize it.
Lucide Icons
4.5
An open-source set of thin-stroke icons, usable for the web, React and design.
Tailwind CSS
4.5
A utility-class CSS framework for building interfaces quickly right in HTML.