Font works locally but not on server

Question

I'm using a font called downlink for my site and I've run into an issue. Everything works perfectly fine when I test my site locally, but when I upload it to the server (via Filezilla) the font is not loaded.

Here's my CSS code for the font:

@font-face {
    font-family: downlink;
    src: url(../fonts/downlink.otf);
}
@font-face {
    font-family: downlink;
    src: url(../fonts/downlinkBold.otf);
    font-weight:bold;
}
@font-face {
    font-family: downlink;
    src: url(../fonts/downlinkItalic.otf);
    font-style:italic;
}
@font-face {
    font-family: downlink;
    src: url(../fonts/downlinkBoldItalic.otf);
    font-weight:bold;
    font-style:italic;
}

I'm quite sure that I've uploaded everything I needed to with Filezilla because if I download all my server contents (well the public html contents) to an empty folder and run it from there, the site still works.

So I'm running dry on ideas to fix this, any help would be very much appreciated.

The errors in the console also contain a status code and message, you should include this information. Otherwise it is not clear if it is e.g. not found or forbidden. — t.niese, Feb 26 '15 at 07:03
Out of curiousity, I looked for the list of font file name extensions: http://fileinfo.com/filetypes/font seems **.oft** does not include on the list? or my technology is outdated? correct me if Im wrong. Thanks — Vainglory07, Feb 26 '15 at 07:04
@Vainglory07 pretty sure it is a type like `hhtps` is. The css file shows `.otf`. But it is bad the _copied_ error has typos. — t.niese, Feb 26 '15 at 07:05
1) Why your url contains `www.'mysite'.co.za`? 2) You request `.oft`, but in CSS you specify `.otf` file. — Justinas, Feb 26 '15 at 07:06
my url is just called 'mysite' to represent where my site is, don't feel like giving it away right now. Sorry for all the typos fixed them now and just realized that my console errors were from previous sessions that I ran, so there aren't any console errors. — Barry Michael Doyle, Feb 26 '15 at 07:11

score 2 · Accepted Answer · answered Feb 26 '15 at 07:29

2

Hi I think you didn't Properly Embed our Font. Please take your font (TTF) format and try to convert Webfont using fontsquirrel or any other converter, than upload your font and style sheet to your server

answered Feb 26 '15 at 07:29

Karthi Keyan

804
6
18

You have regular, italic, bold, boldItalic But all the font have same family name in your @font-face rule please check, or embed your font properly. – Karthi Keyan Feb 26 '15 at 07:31
Worked perfectly thanks! And this helps for all those cross-platform issues we may run into later... – Barry Michael Doyle Feb 26 '15 at 07:54

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

Try this:

First check if your font is accessible through the combined URL.
Second open the webpage and check (using chrome Inspector for instance) if the URL is building correctly.
If none of the shows errors check if the webserver allows the MIME type to be accessed/downloaded
Check this answer to see if it is not a browser support issue: click here

Hope this helps.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 26 '15 at 07:34

invinciblejai

1,103
1
8
15

Font works locally but not on server

2 Answers2