Install FontSwap
Khmer
About Khmer
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 400
- Features
- Standard
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 →Khmer is a sans-serif typeface for the Khmer script designed by Danh Hong. It provides clean, functional letterforms for basic Khmer language support on the web.
History and Design
Khmer was one of the early Khmer-script fonts added to Google Fonts, providing essential support for Cambodian language content on the web. Its straightforward sans-serif construction prioritizes clarity and readability at screen sizes.
Best Use Cases
Khmer excels in:
- Khmer web content: Websites and applications serving Cambodian audiences
- UI text: Interface elements in Khmer-language applications
- Basic documents: Simple Khmer-language documents and forms
Usage Tips
Khmer is a single-weight font best suited for body text and UI elements. For more typographic flexibility with Khmer script, consider Koh Santepheap which offers five weights. Note that this font only supports the Khmer script — it does not include Latin characters.
Is Khmer on Google Fonts?
Yes, Khmer is available for free on Google Fonts. Get Khmer on Google Fonts ↗
Compare Khmer
See how Khmer compares to other fonts side by side.
Font Pairings
Fonts that pair well with Khmer based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Khmer in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Khmer.
@font-face {
font-family: 'Khmer Fallback';
src: local('Arial');
ascent-override: 112.3%;
descent-override: 58.59%;
line-gap-override: 6.45%;
size-adjust: 103.39%;
}How to Use Khmer
Copy these code snippets to quickly add Khmer to your project.
CSS code for Khmer
@import url('https://fonts.googleapis.com/css2?family=Khmer:wght@400&display=swap');HTML code for Khmer
<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=Khmer:wght@400&display=swap" rel="stylesheet">Tailwind code for Khmer
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'khmer': ['Khmer', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-khmer">Your text here</p>Next.js code for Khmer
// Using next/font (Next.js 13+)
import { Khmer } from 'next/font/google';
const khmer = Khmer({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={khmer.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Khmer'" }}>Your text</p>Expo and React Native code for Khmer
// Install: npx expo install @expo-google-fonts/khmer expo-font
import { useFonts, Khmer_400Regular } from '@expo-google-fonts/khmer';
export default function App() {
const [fontsLoaded] = useFonts({
Khmer_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Khmer_400Regular' }}>
Your text here
</Text>
);
}