Search code examples
cssmeteorfontsfont-facewebfonts

@font-face rendering as Times New Roman

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.

Solution

  • 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)