Using @font-face for Nepali Fonts on Your Website: A Developer's Guide

Implementing Nepali (Devanagari) fonts on a website requires more than just adding a CSS font-family declaration. To ensure fast loading, correct rendering, and broad browser support, you need to understand @font-face declarations, format selection, subsetting, and fallback strategies. This guide provides everything a web developer needs to implement Nepali typography correctly.

Basic @font-face Implementation

The @font-face rule tells the browser where to find a custom font file and how to use it:

@font-face {
  font-family: 'NepaliFont';
  src: url('/fonts/nepali-font.woff2') format('woff2'),
       url('/fonts/nepali-font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'NepaliFont', 'Noto Sans Devanagari', sans-serif;
}

Key properties explained:

• font-family: The name you assign to reference this font in your CSS
• src: Path to font files, listed in order of preference (best format first)
• format(): Tells the browser the file format, enabling it to skip unsupported formats
• font-display: swap: Shows fallback text immediately, then swaps in the custom font when loaded. This prevents invisible text during loading.

Use our CSS Generator tool to create @font-face declarations automatically from your font files.

Choosing the Right Format

For modern web development in 2026, use this format stack:

1. WOFF2 (primary) — Best compression (Brotli), supported by all modern browsers
2. WOFF (fallback) — Good compression (zlib), supports older browsers

Do not use TTF or OTF directly on the web — they are significantly larger and offer no benefit over WOFF2.

If you have a TTF or OTF file, convert it using TypeNepal's tools:

• Convert to WOFF2
• Convert to WOFF

Optimizing Devanagari Font Loading

Font Subsetting

A full Devanagari font may include characters for multiple scripts (Latin, Devanagari, other Indic scripts). If you only need Devanagari, subsetting removes unused characters, dramatically reducing file size.

The Devanagari Unicode range is U+0900–U+097F. Use our Unicode Range Generator to generate the exact unicode-range value for your content.

@font-face {
  font-family: 'NepaliFont';
  src: url('/fonts/nepali-font-devanagari.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF;
}

The unicode-range descriptor tells the browser to only download this font file when characters in the specified ranges are present on the page. This is particularly useful for multilingual sites.

Preloading Critical Fonts

For fonts used in above-the-fold content (headings, navigation), add a preload hint:

<link rel="preload" href="/fonts/nepali-font.woff2" as="font" type="font/woff2" crossorigin>

This instructs the browser to start downloading the font immediately, before the CSS is parsed.

Font Display Strategies

The font-display property controls how the browser handles font loading:

Value	Behavior	Best For
swap	Show fallback immediately, swap when loaded	Body text
optional	Only use if already cached	Non-critical fonts
fallback	Brief invisible period, then fallback	Headings
block	Brief invisible period, then show	Icon fonts

For Nepali body text, swap is almost always the right choice — it prevents the content from being invisible during loading.

Handling Multiple Weights

If your Devanagari font comes in multiple weights, declare each weight separately:

@font-face {
  font-family: 'NepaliFont';
  src: url('/fonts/nepali-font-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NepaliFont';
  src: url('/fonts/nepali-font-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

This allows the browser to use the correct font file for each weight, rather than synthetically bolding the regular weight. Use our Font Weight Calculator to convert between numeric and named weight values.

Fallback Font Stack

Always provide fallback fonts in case the custom font fails to load:

.nepali-text {
  font-family: 'CustomNepaliFont', 'Noto Sans Devanagari', 'Mangal', sans-serif;
}

Recommended fallback order:

1. Your custom font
2. Noto Sans Devanagari (available on many systems via Google Fonts)
3. Mangal (default Windows Devanagari font)
4. Generic sans-serif

Common Issues and Solutions

Conjuncts Not Rendering Correctly

If conjunct characters like क्ष or त्र display as separate characters with a visible halant:

• Verify the font has proper OpenType GSUB (Glyph Substitution) tables
• Check that your HTML has the correct lang attribute: <html lang="ne">
• Test in multiple browsers — rendering engines handle conjuncts differently

Font Not Loading

• Check the file path in the src URL
• Verify CORS headers if the font is on a different domain
• Check the browser console for 404 or CORS errors
• Ensure the font file is served with the correct MIME type

Text Appearing as Boxes

This means the font does not contain the required characters. Verify Devanagari character coverage using our Font Analyzer tool.

Testing Your Implementation

After implementing @font-face:

1. Test in Chrome, Firefox, Safari, and Edge
2. Test on mobile (Android Chrome, iOS Safari)
3. Verify conjunct rendering with test strings: क्ष, त्र, ज्ञ, श्र
4. Check font loading performance in Chrome DevTools → Network tab
5. Run a Lighthouse audit to verify font-related performance metrics
6. Preview your font with custom text using our Font Preview Generator

Frequently Asked Questions

Can I use Google Fonts for Devanagari? Yes. Noto Sans Devanagari, Hind, Mukta, and others are available on Google Fonts with automatic subsetting and CDN delivery.

What file size is acceptable for a web font? Aim for under 50KB per font file after WOFF2 compression. A subsetted Devanagari font typically ranges from 20–40KB.

Do I need separate fonts for Nepali and Hindi? No. Both languages use the same Devanagari script and the same Unicode character range. One Devanagari font covers both.

Conclusion

Implementing Nepali fonts on the web requires attention to format selection, compression, subsetting, and fallback strategies. By using WOFF2 as your primary format, subsetting to Devanagari characters only, preloading critical fonts, and providing proper fallbacks, you can deliver beautiful, fast-loading Nepali typography to your users. Use TypeNepal's developer tools — the CSS Generator, Unicode Range Generator, and Font Analyzer — to streamline your workflow.