1

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!

Alon Shmiel
  • 6,753
  • 23
  • 90
  • 138

2 Answers2

2

Well, you're missing the letter 'd' in url("~/fonts/Lato-Bol.ttf"); - but assuming that's not it, I would open up your page with developer tools in Chrome and make sure there's no errors loading any of the files (you would probably see an issue in the JavaScript console, or you can check the Network tab and see if anything is red).

(I don't see anything obviously wrong with the code you have posted above)

Other things to check: 1) Are you including your CSS file in your html above the lines where you are trying to use the font-family style? 2) What do you see in the CSS panel in the developer tools for that div? Is font-family: lato crossed out?

Nicole Stein
  • 925
  • 1
  • 9
  • 23
0

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.

kuroi neko
  • 8,479
  • 1
  • 19
  • 43
  • 1
    TTF is supported by most modern browsers. Also, the TTF files can be downloaded directly from Google Fonts - their UI for this is sneaky - if you put a font in a collection and then click the 'down' arrow in the upper right hand corner, and then the 'zip file' link, it will give you a zip full of ttfs. (ETA - not to imply that Font Squirrel isn't useful- it definitely is - but if it fixes the OP's problem, it will be because it provided correct CSS, not because there was an issue w/ using TTF fonts) – Nicole Stein Dec 31 '13 at 23:49
  • I mostly agree with that. However, other font formats are still needed for older browsers support. – kuroi neko Jan 01 '14 at 00:14