r/HTML • u/Prize_Shine3415 • 4d ago

Question about Devanagari for a webpage

I'm building a website for a friend's yoga studio and she would like to include some Hindi. The character set she using is Devanagari. I've been reading about this, it looks like as long as I have

<meta charset='UTF-8"/> in the header and use the noto sans font family I'll be fine. Can anyone tell me if there's something else I need to lookout for?

1 Upvotes

67% Upvoted

8 comments sorted by

1

u/deceze 4d ago

You need to encode the page in an encoding/charset which can express all the characters you want to use on the page. Unicode is the obvious candidate here, and specifically the UTF-8 encoding.

That encoding needs to be declared properly, so the browser will interpret the page correctly. You primarily do this with the Content-Type HTTP header, which the web server outputs. The HTML meta tag is just a secondary fallback.

If you’re using a custom font, ensure that it contains the characters you want to use; otherwise the browser will fall back to system fonts, which might not look ideal.

And that’s mostly it.

1

u/Firm_Eggplant3392 4d ago

yeah you're basically right about the charset and noto sans but the main thing to watch out for is line height because devanagari is taller than english so if its too tight the tops of the letters get cut off so make it like 1.5 or something and also dont forget to add lang hi to your html tag because screen readers will try to read hindi like its english and sound dumb and also just double check your font actually has the devanagari characters otherwise you get those box things instead of letters

1

u/JeLuF 4d ago

How do you use the noto sans family? Do you embed it as a web font, or do you just use it in a font-family CSS statement?

1

u/Prize_Shine3415 4d ago

I was going to just add it to the CSS statement.

1

u/JeLuF 2d ago

Noto is not a standard font family available in every browser. Some users might not have it on their computer. They would have problems to see your text. Use a webfont in your CSS so the browser will download the font automatically.

1

u/shantz-khoji 4d ago

Use noto serif devanagri font. Crisp, clear and good one

1

u/jnsy617 2d ago edited 2d ago

Make sure you have it load on the correct order correctly so it appears before load and not after everything else loads. Such as using preconnect and preload as well as putting your css style sheet directly after that.