#font-face rendering as Times New Roman - css

Question

I'm using the Meteor framework, and have the following in my main.scss file:
#font-face {
font-family: 'GrandHotel-Regular';
src: url('GrandHotel-Regular.eot');
src: url('GrandHotel-Regular.woff2') format('woff2'),
url('GrandHotel-Regular.woff') format('woff'),
url('GrandHotel-Regular.ttf') format('truetype'),
url('GrandHotel-Regular.svg#GrandHotel-Regular') format('svg'),
url('GrandHotel-Regular.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'GrandHotel-Regular';
}
This isn't working and when I inspect the selected font, the family is GrandHotel-Regular just as it should be, but the console says it's rendering as Times New Roman.
I'm using Chrome on Ubuntu, and it's an older version that can no longer be updated because my laptop is so old, however I don't think this is causing the problem, since things like this have worked for me in the past.
What could be going wrong?
Other questions, like this one:
Font coming out as Times New Roman in Older Browsers
or this one:
Font proxima_novalight is rendered as Times New Roman
aren't addressing the same problem.

Answer 1

The urls for your fonts don't have any folder as part of the filepath, which means they have to be in the same folder as your CSS file. Are they really? (If not, add the folder/filepath)

Answer 2

How is your project set up? Check the network tab in the developer tools to make sure the fonts are actually being loaded. If not, recheck your URLs to make sure they are pointing to the right files.
Your code looks completely fine so if your project setup is not the problem, try using a different browser and see if you can reproduce the issue.