@font-face working when local but not when upload to hosting space

Question

I am building a website and I attempting to get cross-browser compatibility with a free font named Tex Gyre Cursor. So far I have tried several ways which I have found searching though Google.

Site 1, Site 2 & Site 3

They have worked when testing them locally on Chrome, Firefox, Safari and Opera. Not on IE though. I'm not to bothered about IE since it's a massive pain in the arse and I have set Tahoma as the back-up font for this.

The problem arises after I have uploaded my files via FTP File Manager. The web host is GoDaddy.

I have uploaded the font files too.

I visit the site but the font is Tahoma, this occurs on all browsers previously mentioned.

I'm at my wits end and cannot discern the problem.

This was my first attempt with the CSS:

@font-face{    
    font-family:'TexGyreCursor';
        src: url('fonts/texgyrecursor.eot');
        src: local('texgyrecursor'), 
             local('texgyrecursor'), 
             url('fonts/texgyrecursor.ttf') format('truetype'),
             url('fonts/texgyrecursor.svg#font') format('svg'),
             url('fonts/texgyrecursor.otf');
}

My second attempt:

@font-face{
    font-family:'TexGyreCursor';
    src: url('fonts/texgyrecursor.eot');
    src: url('fonts/texgyrecursor.otf');
}

If anymore information is needed please let me know :)

Are the uploaded fonts in a folder called `fonts` that is in the same folder as your css file? (sorry for double checking the obvious) — Jason Sperske, Jan 10 '13 at 19:05
Yes, the main.css is in the root folder and there is a fonts folder there that contains the font files. — Circinus, Jan 10 '13 at 19:08
The only other thing that looks potentially off is the multiple `src` commands, you can separate the individual `url() format()` lines by commands in a single `src`, but I'm not 100% sure that is your problem — Jason Sperske, Jan 10 '13 at 19:11
Did you specify anywhere to use the font like body{font-style:TexGyreCursor;} — raam86, Jan 10 '13 at 19:53
Open your browser's debugger, open the NET pane and look for 404 errors. — Diodeus - James MacFarlane, Jan 10 '13 at 20:07
Try to turn off all browser plugins. NoScript, Firefox plugin, can block fonts, for example. — Maciej Lew, Nov 08 '17 at 21:41

score 6 · Answer 1 · answered Nov 08 '13 at 18:51

6

I recently had this issue, I was designing on windows machine with xampp and uploading to linux server. I finally figured out that the font files were CamelCase and the css code was all lowercase.

It didn't bother my local machine, but linux sees CAPITALS.font and capitals.font as 2 seperate files.

You might want to check to see if that is issue your having.

answered Nov 08 '13 at 18:51

David Abraham

61
1
3

1

great! my problem solved when observe capitals in fonts path. – Hamid Talebi Oct 16 '18 at 20:12

score 4 · Accepted Answer · edited May 23 '17 at 12:34

I have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !@?#.

In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:

CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

I'd suggest following a thread I opened a few months ago which might help: @font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.

For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:

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

score 2 · Answer 3 · answered Jun 11 '19 at 20:36

just wanna help you guys quick,

First: Put this in .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Secondly: Go to where you have hosted the site, in my case it's cpanel and check for the file permission, it should be 755 from the fonts folder till the font(s).

Alfred Xing · Answer 4 · 2013-01-11T04:55:38.937

1

There shouldn't be any errors with the code; it should be a browser or network problem.

Try clearing all the cache and reloading the page several times.
If that still doesn't work, go to Chrome, load the page, press F12, go the the Network tab, and reload the page. See if the browser loads the font CSS file and the fonts.
If there is a 404 Not Found error, point your browser to the font files directly (yourdomain.com/fonts/texgyrecursor.ttf).
If you can't access the font file directly, check whether or not you've uploaded it. Then check the permissions of the file.
If that still doesn't work, try to add the <link> tag that Google Webfonts provides, then uploading.

Hope that fixes it!

edited Jan 11 '13 at 04:55

answered Jan 11 '13 at 04:45

Alfred Xing

4,406
2
23
34

Regarding 4., can you go into more detail with what to do? How can I check whether the files were uploaded etc.? I'm left somewhat helpless because I'm not even receiving any errors in the browser console... – Wecherowski Apr 23 '17 at 09:16
@Wecherowski The easiest way is to point your browser to the URL where the font is supposed to be. For example (as above), `http://yourdomain.com/fonts/texgyrecursor.ttf`. If you get an error instead of the font file, the file either doesn't exist, or doesn't have the right file permissions set. – Alfred Xing Apr 24 '17 at 00:40
Thanks, could you check out my question regarding a similar matter? http://stackoverflow.com/questions/43569501/font-face-in-css-file-not-working-despite-no-reported-error/43569583?noredirect=1#comment74201260_43569583 I've taken all steps listed in this question and others but cannot get it working – Wecherowski Apr 24 '17 at 18:41
@Wecherowski Done! – Alfred Xing Apr 25 '17 at 00:23

score 1 · Answer 5 · edited Aug 15 '14 at 20:35

1

Exactly! the solution is to call fonts from css respecting case sensitive. for example is not the same call like this: url (font / arial.ttf) a ARIAL.TTF file must be url (font / ARIAL.TTF)

edited Aug 15 '14 at 20:35

GrandMasterFlush

6,269
19
81
104

answered Aug 15 '14 at 20:08

hkcoyant

69
1
5

score 0 · Answer 6 · answered Feb 07 '19 at 18:05

0

I've just had the same problem, turns out there was a capital letter on my "Fonts" folder, I renamed it woth FileZila and now it works just fine!

answered Feb 07 '19 at 18:05

antoine serry

67
11

score 0 · Answer 7 · edited Jan 11 '20 at 07:34

The server has utf8 support. So, it is not necessary to install language fonts separately. If you need an additional fonts to be installed in your website upload the font file in your websites font folder. But, if any language is not supporting than you need to enable the support of utf8 on you server. You can do it by putting below mentioned code in head tag-

<meta http-equiv=Content-Type content=text/html; charset=utf-8 />

n90ttt · Answer 8 · 2022-03-03T07:33:24.187

I've had the similar issue - and just resolved it by replacing the font URL/path.

 1. add this into your head tag
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />

identify your font family on your script, you can find it on the font link/url on your script.

this is mine:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,500,700italic,900,900italic' rel='stylesheet' type='text/css'>

from the above details, I can find the font family is ROBOTO. then I visit GoogleFont Website - then find my required font. my font: search font: roboto category: sans-serif
once you found the required font - click on the 'select this style' button, then you will get the link/path like this:

link rel="preconnect" href="https://fonts.googleapis.com" link rel="preconnect" href="https://fonts.gstatic.com" crossorigin link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet"

copy it to your script.

clear your browser cookies/cache or try it on private browser (incognito)

@font-face working when local but not when upload to hosting space

8 Answers8