Unable to get fonts working with #font-face - css

Question

I'm using google webfonts helper to generate the css for my fonts and then download the font files: https://google-webfonts-helper.herokuapp.com
I generated the following:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url('../Content/fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../Content/fonts/lato-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
My font files are stored in ~/Content/fonts
I referenced the font like so:
body {
font-family: 'Lato', sans-serif;
margin-bottom: 90px;
font-weight: 500;
}
However, it seems like no matter what I do, I can't get the font's working. I checked the computed font family in chrome and it's set to Lato. It also won't work in any other browser either.

Answer 1

I don't think your URL is correct.
url('../Content/fonts/lato-v11-latin-regular.woff2')
This means that from wherever your CSS file is located, go back one directory, then go to the foler Content/fonts, but if your fonts are stored at ~/Content/fonts and your CSS is stored in two sub folders e.g. /~/assets/css/mycssFile.css for example your url won't work.
You might try url('/Content/fonts/lato-v11-latin-regular.woff2') which will use the root directory of your website, or even better you can try:
url('/../Content/fonts/lato-v11-latin-regular.woff2') which will tell go to the root directory, and try and go back one folder further which should guarantee you get the root directory. If neither of these fixes your problem, then the issue isn't with the URL, but something else.