CODEWITHSUNDEEP
htmlcsscross-browserfont-face
Circinus
Circinus

Reputation: 69

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

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

Upvotes: 5

Views: 22025

Answers (8)

n90ttt
n90ttt

Reputation: 1

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 />
  1. 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'>

  1. 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

  2. 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)

Upvotes: 0

Aditya
Aditya

Reputation: 1

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 />

Upvotes: 0

shanezzar
shanezzar

Reputation: 1170

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

Like this!

Upvotes: 2

toin
toin

Reputation: 77

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!

Upvotes: 0

hkcoyant
hkcoyant

Reputation: 69

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)

Upvotes: 1

David Abraham
David Abraham

Reputation: 61

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.

Upvotes: 6

Oliver Tappin
Oliver Tappin

Reputation: 2541

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;
}

Upvotes: 4

Alfred Xing
Alfred Xing

Reputation: 4632

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

  1. Try clearing all the cache and reloading the page several times.
  2. 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.
  3. If there is a 404 Not Found error, point your browser to the font files directly (yourdomain.com/fonts/texgyrecursor.ttf).
  4. If you can't access the font file directly, check whether or not you've uploaded it. Then check the permissions of the file.
  5. If that still doesn't work, try to add the <link> tag that Google Webfonts provides, then uploading.

Hope that fixes it!

Upvotes: 1

Related Questions