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!