There are three problems with the code you’ve used: a space in the URL of the Google CSS file (URLs must not contain spaces), the font name Noto Sans Kannada Regular
(the Google CSS file defines Noto Sans Kannada
), and the appearance of the font-family
declaration as such (it must appear within a CSS rule, consisting of a selector, the {
character, a declaration or declarations, and the }
character). The following works:
<!doctype html>
<meta charset=utf-8>
<title>Kannada test</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskannada.css);
body { font-family: "Noto Sans Kannada", sans-serif; font-size: 19.0px; line-height: 1.11em; }
</style>
Hello world!
<p>
ಮುಖ್ಯ_ಪುಟ
The last line of the sample code is Kannada text and may or may not be legible here, depending on fonts installed in your system. On a web page, it will be legible thanks to the use of a downloadable font (via the Google CSS code) – unless the user has denied the use of downloadable fonts, which is rare.
I changed serif
to sans-serif
, since it is illogical to use a serif font as fallback font when the primary font is a sans serif font like here.
Note: Normal text will appear in regular typeface of Noto Sans Kannada, and bold text (as in headings by default) in bold typeface of Noto Sans Kannada. You should not use italic (like em
element) for elements that may contain text in Kannada to be displayed using this font. The reason is that Google does not provide an italic typeface (as you can see by looking at its CSS file), and this makes browsers generate “fake italic” by algorithmically slanting glyphs, which is bad typography.