Font-Face works locally, but not on staging server

Question

Font face works perfectly on my local machine, and when i am viewing the staging site on my local machine, but when viewed on my phone or other computers the font doesn't load correctly.

@font-face {
    font-family: '../fonts/LubalinGraphStd-Demi';
    src:    url('../fonts/LubalinGraphStd-Demi.eot');
    src:    url('../fonts/LubalinGraphStd-Demi.eot?#iefix') format('embedded-opentype'),
            url('../fonts/LubalinGraphStd-Demi.svg#LubalinGraphStd-Demi') format('svg'),
            url('../fonts/LubalinGraphStd-Demi.ttf') format('truetype'),
            url('../fonts/LubalinGraphStd-Demi.woff') format('woff'),
            url('../fonts/LubalinGraphStd-Demi.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

Heres the staging link: http://tpo.tmwlsh.co.uk username: tpo, password: tpo.

Don't use this syntax, this is an block of code for loading fonts from 2012, when the webfont landscape was radically different, and makes no sense today. On the modern web, [just use woff/woff2](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385) and nothing else. — Mike 'Pomax' Kamermans, May 14 '19 at 05:29

score 0 · Answer 1 · answered May 14 '19 at 09:43

Your font-family name looks suspicious in your @font-face:

    font-family: '../fonts/LubalinGraphStd-Demi';

Looks like you accidentaly used the filename here, instead of a normal name. You're applying font-family: LubalinGraphStd-Demi in your elements, so if you change it to:

    font-family: 'LubalinGraphStd-Demi';

It should be fixed.

On a different note, you're using some ancient font formats there. Are you sure you need to support acient first gen iPads or iPhones with iOS3, or IE8 and older?

Font-Face works locally, but not on staging server

1 Answers1