[css] Using Lato fonts in my css (@font-face)

I'm trying to get these fonts and add them to my css:

lato bold italic 24, lato regular 14, lato bold 14, lato light 14, lato light italic 16 

I found these fonts in this site: http://www.fontsquirrel.com/fonts/lato

I downloaded it. there are some files there (ttf), and add it to the folder fonts in my mvc project.

I want the ability to define:

<div style="font-family: lato-bold italic; font-size: 24px;">lato bold italic font</div> <div style="font-family: lato-regular; font-size: 14px;">lato regular font</div> 

so I read I have to do something like:

@font-face {      font-family: lato-bold;     src: url("~/fonts/Lato-Bol.ttf"); } 

and then something like:

<div style="font-family: lato-bold; font-size: 14px;">lato bold font</div> 

but it doesn't work..

there are a lot of answers here:

http://stackoverflow.com/questions/13463072/css-font-face-not-working-in-firefox 

but I don't have otf files..

p.s.,

I want to save the fonts files in my mvc and not link them via google fonts

any help appreciated!

Font Squirrel has a wonderful web font generator.

I think you should find what you need here to generate OTF fonts and the needed CSS to use them. It will even support older IE versions.