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!
This question is related to
css
asp.net-mvc
font-face
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?
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.
Source: Stackoverflow.com