dev.rean.me
css

CSS - Using Multiple Google Fonts (Khmer & English Fonts) with Video Tutorial

Learn step-by-step how to combine Khmer and English Google Fonts in HTML & CSS with code examples, fallback tips, and video tutorial in Khmer language.

2026-08-27 · 4 min read

#css#google-fonts#font#html#khmer-font#kantunruy-pro
Share:

Hello my friend! Today we learn together how to use multiple Google Fonts (Khmer font and English font together) in HTML & CSS with simple step-by-step explanation and video tutorial in Khmer language! Let's get started!

Using custom Khmer and English fonts will make your website look super clean, modern, and easy to read for all visitors!

Watch Video Tutorial (Khmer)

Watch video first to see how to search, select, and combine Khmer and English Google Fonts in VS Code:

1. Why Use Khmer + English Fonts Together?

When building websites for Cambodia or multi-language projects, you need two fonts:

  • English Font: Modern & clean sans-serif like Plus Jakarta Sans, Inter, or Outfit.
  • Khmer Font: Smooth Khmer script font like Kantumruy Pro, Battambang, or Siemreap.

Google Fonts lets you load both fonts together in 1 single file link for fast performance!

2. Steps to Get Fonts from Google Fonts

  1. Go to official Google Fonts Website.
  2. In language filter dropdown, select Khmer to pick a Khmer font (for example: Kantumruy Pro).
  3. Search for English font (for example: Plus Jakarta Sans).
  4. Select font styles (Regular 400, Bold 700).
  5. Click Get embed code button at top right corner to copy link code.

Paste this code inside your HTML <head> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Khmer and English Fonts Demo</title>

  <!-- Preconnect for fast font loading -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- Single combined link for Plus Jakarta Sans (English) and Kantumruy Pro (Khmer) -->
  <link
    href="https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap"
    rel="stylesheet"
  />

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Welcome to Web Development / សួស្ដីអ្នកទាំងអស់គ្នា!</h1>
  <p>This is English text and Khmer script text: រៀនបង្កើតគេហទំព័រជាមួយ HTML & CSS</p>
</body>
</html>

4. Method 2: Embed CSS @import Rule

If you want to put font import inside your style.css file:

/* Top of style.css file */
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');

body {
  font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;
}

5. How to Set CSS font-family Priority (Magic Fallback Trick!)

To make English text use English font and Khmer text use Khmer font automatically, write font-family like this:

/* English font first, Khmer font second, fallback last */
body {
  font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Headings styling */
h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;
  font-weight: 700;
}

💡 Magic How It Works: Browser reads font-family from left to right! When rendering English letters (A-Z), browser uses Plus Jakarta Sans. When browser sees Khmer unicode script (សួស្ដី), English font does not contain Khmer glyphs, so browser automatically falls back to Kantumruy Pro! Both languages display perfectly without extra HTML tags!

Live Rendered Preview

Web Development Course — វគ្គសិក្សាអភិវឌ្ឍន៍វេបសាយ

Learn HTML, CSS, JavaScript, and PHP with practical code examples. ស្វែងយល់ពីមូលដ្ឋានគ្រឹះនៃការសរសេរកូដវេបសាយយ៉ាងងាយស្រួល!

font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;

Pro Tips for Khmer & English Fonts

💡 Pro Tip 1: Font Order Matters!

Always list English font BEFORE Khmer font in CSS font-family:

  • ✅ Correct: font-family: 'Plus Jakarta Sans', 'Kantumruy Pro', sans-serif;
  • ❌ Wrong: font-family: 'Kantumruy Pro', 'Plus Jakarta Sans', sans-serif; (Khmer font might override English letters with different spacing!).

💡 Pro Tip 2: Combine Fonts into 1 URL Request!

Never paste separate <link> tags for every font! Combine them with &family= inside 1 URL to reduce HTTP requests and speed up web page load time.

⚠️ Warning: Limit Font Weights!

Do not select all 9 weights (100, 200, 300, 400, 500, 600, 700, 800, 900)! Select only weights you actually use (usually 400 Regular and 700 Bold). Loading too many weights will slow down website speed!

💡 Next Lesson: Want to learn more CSS tricks? Check out CSS Tips and Tricks with Practical Examples!

Happy coding! Try combining Khmer and English Google Fonts in your next website project!

← Back to css
Share: