Which Thai fonts work best for websites?
For most business websites in Thailand, a free font from Google Fonts is the right starting point. For long Thai body text, a looped face such as Sarabun or Noto Sans Thai Looped reads comfortably at small sizes.
For a modern, cleaner look, loopless families such as Noto Sans Thai, IBM Plex Sans Thai, Prompt or Kanit work well, with Prompt and Kanit best kept for headings. All of these are released under the SIL Open Font License, which allows commercial use.
Two rules matter more than which family you pick. First, give Thai text more line height than you would give English, because vowels and tone marks stack above and below the line. Second, set Thai body text a little larger than English, because Thai glyphs look smaller at the same pixel size. Get those right and even a plain system font reads well. Get them wrong and the most fashionable face from this year's web design trends will still look cramped.
The rest of this guide explains the choices behind those rules, how to pair Thai with an English font, and how to stop web fonts slowing your pages down.
Looped or loopless: choosing a Thai style
Traditional Thai letters have small loops, or heads, where each stroke begins. Children learn to read with them, and printed books, newspapers and government documents mostly use looped type. Loopless styles drop those heads and look closer to Latin sans serif letters. They arrived with advertising and have become the default look for brands, apps and signage in Bangkok.
Where looped type works best
- Long body text: articles, policies, menus with descriptions, clinic treatment details.
- Older readers and formal audiences, such as legal, medical, finance or government-facing firms.
- Small sizes, where the loops help tell similar letters apart.
Where loopless type works best
- Headings, navigation, buttons and short marketing lines.
- Brands that want a contemporary, international feel, such as cafés, fashion, tech and co-working spaces.
- Pages that mix Thai and English closely, since loopless shapes sit more comfortably beside Latin letters.
The risk with loopless body text
Several Thai letters differ only by a loop or a small notch. Without loops, pairs such as บ and ป or ด and ต rely on finer details, and at 14 or 15 pixels on a cheap phone screen they blur together. Loopless body text can work, but choose a family designed for text rather than display, and give it generous size and spacing.
A common and sensible pattern is a loopless family for headings and a looped or text-oriented family for paragraphs. Some families, including Noto Sans Thai and IBM Plex Sans Thai, also come in a looped version, which keeps the two styles visually related.
Free Thai web fonts worth using
Google Fonts lists dozens of families that support Thai. The short list below covers most business needs. Every family here is published in the Google Fonts repository under the SIL Open Font License, which permits use on commercial websites, self-hosting and modification, as long as you do not sell the font files themselves. Check the licence file for any font you download elsewhere; many free Thai fonts shared on forums are free for personal use only.
| Family | Style | Best for | Why it works |
|---|---|---|---|
| Sarabun | Looped | Body text, formal content | Familiar from official documents, very readable in long paragraphs |
| Noto Sans Thai Looped | Looped | Body text in bilingual sites | Designed to sit with the wider Noto family |
| Noto Sans Thai | Loopless | Interfaces, headings, mixed Thai and English | Neutral shapes, pairs easily with Noto Sans and many Latin fonts |
| IBM Plex Sans Thai | Loopless (looped version available) | Corporate and B2B sites | Built to sit beside IBM Plex Sans, a clear pairing |
| Prompt | Loopless | Headings, buttons, short lines | Strong geometric character, many weights |
| Kanit | Loopless | Display headings | Bold, compact look, less suited to long paragraphs |
| Anuphan | Loopless | Headings and UI text | Friendly, open shapes that stay clear at small sizes |
| Noto Serif Thai | Looped, serif | Editorial and premium brands | A quieter serif option for long reading |
Size, line height and line breaks
These are the Thai-specific settings that make or break readability.
Size: Thai looks smaller
Thai letters are mostly the height of a Latin x-height, with vowels and tone marks using the space above and below. So at 16 pixels, Thai looks noticeably smaller than English. A practical starting point is 17 to 18 pixels for Thai body text where English would use 16, then adjust by eye with the chosen family. Many sites simply set a slightly larger size on pages with lang="th".
Line height: room for stacked marks
A syllable can carry a vowel above the consonant and a tone mark above that, while another vowel hangs below. With a tight line height of 1.2 or 1.3, marks on one line touch descending vowels on the line above. Around 1.6 to 1.8 is a safer range for Thai paragraphs. Headings can be tighter, but check them with real words that stack, such as ที่ and นี้, rather than English placeholder text.
Line breaks: no spaces between words
Thai uses spaces between phrases and sentences, not between words. Modern browsers break Thai lines using built-in dictionaries, which works well most of the time but can split unusual brand names or transliterated terms awkwardly. Useful habits:
- Avoid justified Thai text. It stretches the few spaces available into large gaps.
- Where a long word breaks badly, insert a zero-width space or a wbr element at the right point in that heading. Do this sparingly and listen to the result with a screen reader, since hidden characters can change how text is read aloud.
- Never add manual line breaks to force wrapping; they break on other screen widths.
These settings are also accessibility issues. Our guide to website accessibility covers contrast, zoom and language attributes that apply to Thai pages too.
Pairing Thai and Latin fonts
Most Bangkok business sites show English and Thai together: brand names, product codes, prices, email addresses and whole English pages. When a Thai font lacks Latin letters, or has Latin letters that clash, the browser falls back to another font mid-sentence and the text looks patched together.
Three ways to pair
- Use a superfamily. Noto Sans with Noto Sans Thai, or IBM Plex Sans with IBM Plex Sans Thai. The designers matched weights and proportions, so this is the safest route.
- Use a Thai family's own Latin. Sarabun, Prompt and Kanit include Latin letters designed alongside the Thai, which suits sites where English appears only in small doses.
- Match by eye. Choose a Latin font whose x-height lines up with the Thai letter height and whose stroke weight feels similar at the same size. Set both in the same paragraph and look for one that stands out.
Setting up the stack
List the Latin font first and the Thai font second in your CSS font-family, then generic fallbacks. The browser uses the first font that contains each character, so English picks up the Latin face and Thai picks up the Thai face. Keep weights consistent: if headings use 600 in English, load 600 for Thai too.
Record these choices once, as font tokens with sizes and line heights per language, in your website design system. That stops each new page or plugin inventing its own Thai settings.
Keeping Thai fonts fast
Every font weight is a separate file, and Thai files are larger than Latin-only ones because they carry both scripts. Load five weights of two families and a phone on mobile data can wait on fonts before text appears. A few habits keep it quick, and fonts are one of the first things we check in website speed optimization.
Load less
- Two or three weights, usually regular, a medium or semibold, and bold. Skip italics; Thai has no traditional italic and slanted Thai rarely helps.
- WOFF2 only. Every current browser supports it and it is the most compact format.
- Subset where you can. Split files by script with unicode-range so an English-only page never downloads Thai glyphs. Google Fonts already serves split files this way.
- Consider a variable font if the family offers one and you need several weights; one file can replace three or four.
Self-host or use a font CDN?
Browsers no longer share cached fonts between different websites, so the old argument that visitors already have Google Fonts cached no longer holds. Self-hosting WOFF2 files on your own domain saves a connection to another server and keeps visitor IP addresses from going to a third party, which is tidier under PDPA. Keep the licence file with the fonts.
Show text straight away
Use font-display: swap so text appears in a fallback font while the web font loads, and preload the one body weight used above the fold. Pick fallbacks that exist on each platform: Thonburi or Sukhumvit Set on Apple devices, Leelawadee UI or Tahoma on Windows, and Noto Sans Thai on most Android phones, followed by sans-serif.
Testing before launch
Thai typography only proves itself on real content and real screens. Design tools on a large monitor hide the problems that show up on a budget Android phone in a taxi. Before launch, run through the checks below with actual Thai copy, not placeholder text. Writing the copy first also helps in other ways, as our website copywriting tips that turn visitors into leads explain, because headings in Thai are often longer than their English equivalents and need room in the layout.
Include forms in the test. Labels, placeholders, error messages and buttons often fall back to a system font when a plugin sets its own styles, and cramped Thai labels undo good contact form best practices.
Fonts are one part of a two-language site. Our walkthrough on how to build a bilingual Thai-English website covers URLs, switchers and translation workflow. When we handle multilingual website development, font loading, per-language sizes and line heights are set in the theme from the start; our Business package, from THB 30,000, includes English and Thai across up to 15 pages. If you want the Thai side of your site to read properly, ask for a website development quote and tell us which pages matter most.
- Real devicesCheck an iPhone, a mid-range Android phone and a Windows laptop. Fallback fonts differ on each.
- Stacked marksFind words with marks above and below, and confirm nothing clips or touches the line above, including in buttons and menus.
- Line breaksResize the browser slowly and watch headings for awkward splits in brand names or long words.
- Mixed textLook at sentences that combine Thai with English, numbers and prices. Check that baselines and weights look even.
- Bold and sizesConfirm bold Thai is actually bold, not synthesised by the browser because that weight was not loaded.
- Slow networkThrottle the connection in browser developer tools and see how long text takes to appear.
- ZoomZoom to 200% and check that Thai text still wraps cleanly without overlapping.
Who reviewed this guide
Who builds your site
Litesh Dhir
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish.
More about usMore on web design and UX
Sources
- Google Fonts: families with Thai support
- SIL Open Font License
- Google Fonts repository: Sarabun licence file
- MDN: CSS word-break
- MDN: font-display
- Microsoft Learn: Leelawadee UI font