Why does my Nepali text display as boxes or question marks on some devices?

Usually the page uses a legacy encoding like Preeti instead of Unicode. Devices without that exact font show missing-glyph boxes. Switch the content to Unicode UTF-8 and set a font stack including Devanagari-capable fonts such as Noto Sans Devanagari. Verify by checking the page character encoding is UTF-8.

What is the difference between Preeti and Unicode Nepali text on a website?

Preeti is a non-standard encoding where Nepali characters occupy Latin code points. Unicode assigns standard Devanagari code points independent of font. Preeti text breaks search, copy-paste, and fallback. Unicode works across platforms. Migrating means converting content, not just changing the font. Back up the database before bulk conversion.

Which web fonts reliably support Nepali Devanagari?

Noto Sans Devanagari, Mukta, Hind, and Lohit Devanagari are commonly used. They include conjuncts and vowel signs. Test with a sample string like नेपाली and check for tofu boxes. Font subsetting can reduce file size but must keep the Devanagari block and common conjuncts.

How do I stop Nepali words from breaking mid-word at line ends?

Devanagari words should break on syllables, not arbitrary characters. Ensure the page sets the language attribute to Nepali and the browser uses proper line-breaking rules. Add CSS word-break keep-all or overflow-wrap normal as a fallback. Verify by resizing the viewport and looking for split conjuncts or orphan vowel signs.

Why does the same Nepali text look different on iPhone and Android?

Each OS has its own default Devanagari system font with different glyph shapes and spacing. If the site does not specify a web font, the browser falls back to the device font. To standardise, load a self-hosted or Google-hosted Devanagari web font and place it before system fonts in the stack.

What causes incorrect rendering of half-forms or conjuncts in Nepali?

Half-forms and conjuncts require complex script shaping. If the font lacks those glyphs, or the browser does not apply OpenType features, you see broken sequences. Use a font with full Devanagari support and test common conjuncts like क्ष त्र ज्ञ. Shaping is automatic in modern browsers; no CSS feature settings needed.

How do I verify my web font renders every required Nepali character?

Load the font in a test page and render a string covering vowels, vowel signs, half-forms, and common conjuncts like क्ष त्र ज्ञ. Inspect for missing glyph boxes or mispositioned matras. Use a tool like FontForge or pyftsubset to list the character map and confirm Devanagari range U+0900 to U+097F is present.

Is it better to self-host Nepali web fonts or use Google Fonts?

Self-hosting gives control over caching and privacy, and avoids a third-party request. Google Fonts is simpler to set up and uses a fast CDN. Operational overhead is low either way, but self-hosting adds a font file to your server and requires correct font-face with font-display swap. Check current vendor terms for usage.

What makes a Nepali font file slow down page load?

Devanagari fonts are larger than Latin fonts because they contain more glyphs. Loading full Noto Sans Devanagari in multiple weights can add hundreds of kilobytes. Use unicode-range to load only needed subsets, subset the font to common characters, and set font-display swap so text appears with fallback while the font loads.

How do I fix Nepali vowel signs like ि or ी being clipped in headings?

Devanagari matras extend above or below the base line, so line-height and overflow need headroom. Set line-height to at least 1.5 for headings, avoid overflow hidden on text containers, and test with a string like कीर्ति at large sizes. If clipping persists, adjust padding or use a font with taller vertical metrics.

Nepali Font Website Issues: Why Text Breaks and How to Fix

Nepali typography on the web: what still goes wrong

Nepali font website issues still trace to three causes: legacy Preeti-encoded text, fonts without the Devanagari Unicode block, and font stacks that put Latin typefaces first. The visible result is broken conjuncts, detached vowel signs and unsearchable content. The fix is Unicode content plus a font that genuinely supports Devanagari.

Key Takeaways

Broken Nepali text fails at one of three layers: encoding, font or shaping engine.
Preeti maps Devanagari glyphs onto Latin codepoints, so it renders as gibberish without the Preeti font installed.
Convert content to Unicode before touching fonts or CSS — styling cannot fix a legacy encoding.
Choose a webfont that carries the Devanagari block and list it first in the font stack.
Test क्ष, त्र and ज्ञ in a private browser window with no local fonts to verify the fix.
Broken Nepali text costs search visibility, accessibility and conversions, not just aesthetics.

The four stages a string of Nepali text passes through on the web; a failure at any one stage breaks conjuncts, matras or search.

What actually breaks in Nepali web typography?

Broken Nepali text fails at one of three layers: the encoding, the font, or the shaping engine. Conjuncts like क्ष and त्र render as separate consonants with a visible halant, vowel signs like ो detach from their base letter, and copied text turns into Latin gibberish. Each symptom points to a different failure point, so diagnosing the right layer matters.

The Devanagari script is not a simple alphabet. A single syllable can combine a base consonant, a vowel sign above, a vowel sign below and a joined consonant, all shaped by rules the browser applies at render time. When the font lacks the glyph or the shaping engine receives a legacy encoding, the pieces fall apart. You see a halant where a conjunct should be, or a matra floating beside its consonant instead of above it.

The three layers fail differently. An encoding problem shows the same broken text on every device until the old font is installed. A font problem shows correct text on machines with good system fallbacks and broken text everywhere else. A CSS problem shows correct glyphs that are cramped, clipped or misaligned because line-height and letter-spacing were tuned for Latin, not Devanagari.

Why does legacy Preeti text fail on the modern web?

Preeti encodes Devanagari glyphs onto Latin codepoints, so the letters look Nepali only when the Preeti font is installed. A browser without that font shows raw ASCII, search engines index nonsense, and screen readers read Latin syllables. Copied text cannot be pasted into Unicode applications without conversion, which breaks search, sharing and SEO.

Preeti was the standard for Nepali typing for years because it worked on old Windows machines without Unicode support. It maps each Devanagari glyph to an ASCII codepoint, so the byte sequence is meaningless without the Preeti font installed. Websites that pasted this text into HTML carried the encoding problem straight into the browser. The fix is conversion, not styling.

Conversion is a one-way door. Once content is Unicode, it searches correctly, copies correctly and renders correctly on every modern device. Conversion tools exist to process Preeti in bulk, but automated output needs proofreading: some rare conjuncts map ambiguously, and numbers or Latin words mixed into Nepali text can be mangled. Proofread a sample of every page after conversion.

Which fonts genuinely support Devanagari on the web?

Noto Sans Devanagari, Mukta, Hind, Baloo 2, Karma and Ek Mukta all ship Devanagari glyphs and are available on Google Fonts. Windows, macOS, iOS and Android each bundle a system Devanagari face, so a font stack can lean on system fallbacks. Check a font's character set on its specimen page before embedding it — Google Fonts documentation explains the per-script subsets.

Google Fonts lists Devanagari support per family on its specimen pages, and the first-party documentation at developers.google.com explains how serving works. When you embed a webfont, the CSS references a subset per script; a Devanagari subset only downloads when the page actually contains Devanagari text, which keeps Latin pages light.

If you prefer a self-hosted font, check the MDN @font-face documentation and confirm the font file includes the Devanagari Unicode block, U+0900 through U+097F. A Latin-only file embedded with @font-face will still leave Nepali text broken, because the browser has no Devanagari glyphs to draw from.

What does a correct font stack and CSS look like?

A safe stack begins with a webfont that includes Devanagari, then named system fallbacks, then a generic sans-serif. Avoid letter-spacing on Devanagari text, allow extra line-height for above- and below-base marks, and set font-display: swap so text appears immediately while the webfont loads. The stack below is a sensible starting point.

font-family: "Noto Sans Devanagari", "Mukta", "Nirmala UI", "Kohinoor Devanagari", sans-serif;
line-height: 1.6;
letter-spacing: normal;

The system faces matter because they load instantly and cost nothing. Nirmala UI ships with Windows, Kohinoor Devanagari with Apple platforms, and Noto Sans Devanagari with Android. By naming them explicitly, you get consistent rendering before the webfont arrives and a graceful fallback if it never does.

How do you fix Nepali font rendering on an existing site?

Fix the encoding first, then the font, then the CSS. Convert Preeti content to Unicode with a conversion tool, re-embed a Devanagari-capable webfont, and test conjuncts in a real browser. Skipping the encoding step leaves text that looks correct only on machines where the old font happens to be installed.

Inventory the content. Find every page or block that holds Preeti text by opening the site with no custom fonts and looking for gibberish, or by grepping the source for tell-tale ASCII sequences.
Convert the content to Unicode with a Preeti converter, page by page. Do not skip proofreading — paste the output into a plain text editor and confirm it reads correctly before putting it in the CMS.
Replace the font stack. Choose a webfont with a full Devanagari block and list named system fallbacks after it, as shown above.
Set line-height and letter-spacing. Give Devanagari extra vertical room for above- and below-base marks, and remove any letter-spacing applied for Latin headings.
Verify on a clean device, then deploy. Test in a private window, then push the change and re-check on a real phone.

How do you verify the fix worked?

Open the page in a private window with no local fonts cached, and check three strings: क्ष, त्र and ज्ञ. Copy them out and paste into a plain text editor; they must paste as Unicode, not ASCII. Inspect the computed font in DevTools to confirm the Devanagari face is actually applied, and run a Lighthouse accessibility pass afterwards.

A common mistake we see is verifying on the same machine that has Preeti or the webfont already installed locally. That machine masks the problem. Use a private browsing window, a borrowed phone, or a clean virtual machine. If the conjuncts still break there, the fix has not shipped.

What does it cost to leave this broken?

Broken Nepali text costs search visibility, because Google indexes the mangled codepoints rather than the words users type. It also costs conversions: visitors who see tofu or detached vowel signs assume the site is unmaintained and leave. The fix is usually an afternoon of content conversion and CSS, which is far cheaper than the traffic lost over months.

The operational overhead is small once content is Unicode: the same fonts and CSS serve every page. The real cost is the work you skip. Screen readers announce Latin gibberish, so accessibility claims fall apart too, and any analytics on Nepali-language pages will undercount intent.

When do you bother? If the site carries any Nepali content that users search, copy or read on mobile, the answer is now. A site with no Nepali text at all has nothing to fix. A site with a single decorative Nepali slogan still needs the font, but the conversion is trivial. If the platform itself is old and the content is broken across hundreds of pages, a rebuild may be worth evaluating against the decision to rebuild a website.

Common mistakes that keep re-appearing

Teams paste Preeti text straight into a WordPress block or a React component and assume Unicode. Others upload a Latin-only webfont and set it as the first family in the stack. Some set letter-spacing on headings, which breaks conjunct shaping in older rendering engines. Each mistake survives because it looks fine on one developer's machine.

Pasting legacy Preeti copy into a new CMS without converting it first.
Embedding a webfont that lacks the Devanagari block and wondering why Nepali text does not change.
Putting a Latin family like Inter or Roboto first in the stack, so the browser tries Latin glyphs before Devanagari fallbacks.
Using text-transform: uppercase on Devanagari, which does nothing — Devanagari has no case — and can confuse the shaping pass.
Skipping a proofread after automated conversion and shipping pages where त turns into a different conjunct.

Concrete scenario: a tourism site with broken conjuncts

A Pokhara trekking company rebuilds its brochure site, pasting old Preeti copy into WordPress with a premium Latin webfont. On the designer's Mac it renders, because Kohinoor Devanagari falls back gracefully. On an office Windows machine without Preeti installed, every क्ष becomes two letters with a visible halant, and bookings drop.

The fix starts with the content, not the design. They export the old copy, run it through a Preeti-to-Unicode converter, proofread the conjunct-heavy route descriptions, and paste the clean Unicode text back into WordPress. Then they add a Devanagari webfont, reorder the stack and test on a borrowed Android phone in a private browser. The site reads correctly everywhere within a day, and the team can now maintain it themselves — a handover our team can help with, documented in our website handover checklist.

Alternatives compared: re-encode, re-type, or re-platform

Three paths fix broken Nepali text: automated Preeti-to-Unicode conversion, manual re-typing of the content in Unicode, or moving to a platform that enforces Unicode natively. Conversion is fastest but needs proofreading; re-typing is cleanest but slowest; re-platforming only helps if the new system rejects legacy encodings at input time.

Approach	Effort	Risk	When it wins
Automated conversion	Low	Medium — proofread needed	Large volumes of Preeti text
Manual re-typing	High	Low	Short, high-visibility copy
Re-platform	Medium	Medium	CMS also enforces Unicode at input

For most sites, automated conversion plus proofreading is the right starting point. Re-typing every page is safer but slow; a rebuild only makes sense when the old platform is itself the reason the text is broken. Our team regularly handles this as part of WordPress development and website design work — the content audit and conversion are part of the same pass.

How the common Nepali typography failures map to the corrective action each one actually requires.

The five milestones in a Nepali typography fix, from auditing Preeti content through deploying and monitoring the corrected Unicode.

In short

Nepali web text breaks at the encoding, the font or the shaping engine — diagnose which first.
Convert legacy Preeti to Unicode before any font or CSS work; styling cannot repair an encoding.
Choose a webfont with the Devanagari block and list system Devanagari faces as fallbacks.
Verify with क्ष, त्र and ज्ञ in a clean private window, then deploy and re-check on a real device.

People also search for

If your site carries Nepali content that renders as tofu, detached matras or visible halants, our team can help you audit the text, convert legacy Preeti to Unicode and set up a font stack that holds across browsers. Contact us for a review, or see the range of services we provide.

Frequently asked questions

Usually the page uses a legacy encoding like Preeti instead of Unicode. Devices without that exact font show missing-glyph boxes. Switch the content to Unicode UTF-8 and set a font stack including Devanagari-capable fonts such as Noto Sans Devanagari. Verify by checking the page character encoding is UTF-8.
Preeti is a non-standard encoding where Nepali characters occupy Latin code points. Unicode assigns standard Devanagari code points independent of font. Preeti text breaks search, copy-paste, and fallback. Unicode works across platforms. Migrating means converting content, not just changing the font. Back up the database before bulk conversion.
Noto Sans Devanagari, Mukta, Hind, and Lohit Devanagari are commonly used. They include conjuncts and vowel signs. Test with a sample string like नेपाली and check for tofu boxes. Font subsetting can reduce file size but must keep the Devanagari block and common conjuncts.
Devanagari words should break on syllables, not arbitrary characters. Ensure the page sets the language attribute to Nepali and the browser uses proper line-breaking rules. Add CSS word-break keep-all or overflow-wrap normal as a fallback. Verify by resizing the viewport and looking for split conjuncts or orphan vowel signs.
Each OS has its own default Devanagari system font with different glyph shapes and spacing. If the site does not specify a web font, the browser falls back to the device font. To standardise, load a self-hosted or Google-hosted Devanagari web font and place it before system fonts in the stack.
Half-forms and conjuncts require complex script shaping. If the font lacks those glyphs, or the browser does not apply OpenType features, you see broken sequences. Use a font with full Devanagari support and test common conjuncts like क्ष त्र ज्ञ. Shaping is automatic in modern browsers; no CSS feature settings needed.
Load the font in a test page and render a string covering vowels, vowel signs, half-forms, and common conjuncts like क्ष त्र ज्ञ. Inspect for missing glyph boxes or mispositioned matras. Use a tool like FontForge or pyftsubset to list the character map and confirm Devanagari range U+0900 to U+097F is present.
Self-hosting gives control over caching and privacy, and avoids a third-party request. Google Fonts is simpler to set up and uses a fast CDN. Operational overhead is low either way, but self-hosting adds a font file to your server and requires correct font-face with font-display swap. Check current vendor terms for usage.
Devanagari fonts are larger than Latin fonts because they contain more glyphs. Loading full Noto Sans Devanagari in multiple weights can add hundreds of kilobytes. Use unicode-range to load only needed subsets, subset the font to common characters, and set font-display swap so text appears with fallback while the font loads.
Devanagari matras extend above or below the base line, so line-height and overflow need headroom. Set line-height to at least 1.5 for headings, avoid overflow hidden on text containers, and test with a string like कीर्ति at large sizes. If clipping persists, adjust padding or use a font with taller vertical metrics.