How to embed kannada font?

10.3k Views Asked by At

I want to make Kannada website in that I have lot of content so that till now I'm using google kannada translator to add but now the content is more so is their any way to do embed kannada font I tried this link http://www.google.com/fonts/earlyaccess but I couldn't get it.

I tried like this:

@import url(http: //fonts.googleapis.com/earlyaccess/notosanskannada.css);
font-family: "Noto Sans Kannada Regular", serif; font-size: 19.0px; line-height: 1.11em;
1

There are 1 best solutions below

0
On

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.