Using Telugu ttf in my web site

Question

I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below

@font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
     url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
     url('Sree Krushnadevaraya-webfont.woff') format('woff'),
     url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
     url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
    font-style: normal;

}

.badifont {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'sree_krushnadevarayaregular';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

https://css-tricks.com/snippets/css/using-font-face/

However, when I use the new class that I created, the text does not show up in the font that I am expecting. It is using the default Telugu Font that is available on my machine.

What am I missing?

I changed my code to use `డే మొయిన్ తెలుగు బడి` and it changed the font to what I was expecting. But this is probably only going to work if I have that font installed locally right?? — avsln, Mar 05 '15 at 18:59

score 1 · Accepted Answer · answered Mar 06 '15 at 19:04

I looked it up a little more and found this solution.

Go to Google Fonts and type in the name of your font. Most fonts I needed were already taken care of by Google. You can then copy the markup google provides and put it in your code.

So I had to do this

<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>

Then I setup my stylesheet with the name of the font in the font-family as 'Sree Krushnadevaraya' and it worked.

score 0 · Answer 2 · answered Mar 05 '15 at 18:19

3 things to check: in all your font files, remove the space, or put an underscore instead of space for instance:

 Sree_Krushnadevaraya-webfont.eot

Then adjust those file names in your code for @fontface.

Then open your svg file in a text editor. check what is on the id of your font--it is usually around line 6, <font id=...>

Make sure you are using that exact font id name here AFTER the hashtag (#):

 url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');

Then make sure all your fonts and css is uploaded again.

Thanks Mia, But that did not help. When I do an F12 Developer tools view on the markup, it shows me that the font-family is "sree_krushnadevarayaregular" but it just does not load the proper font. — avsln, Mar 05 '15 at 18:54

Using Telugu ttf in my web site

2 Answers2