Here is the HTML I am having problems with:
<link rel="stylesheet" href="http://resources.8thdaystudio.com/neonlights.css" type="text/css" />
I have a copy of the css file in my page's local folder, and when I put neonlights.css in the href, it works. I have a copy in my resources server to use from any of my pages, but it's not applying the css when I do the direct link. Using inspect in Chrome it's not showing me an error loading the file but still not applying the css.
it is observed that the url:
http://71.57.185.233:82/neonlights.css loads as text/css
but http://resources.8thdaystudio.com/neonlights.css loads as text/html.
It's due to your server's configuration as you indicated. I have verified this in Fiddler.
Through some reading about MIME types I figured out that the likely problem is my server. I'm running Servers Ultimate Pro on an Android device and I believe it's sending the file with the incorrect type.
I'm the dev of www.xlent.se and if you try to load the page in IE or FF you'll notice that all icons are replaced by "hex blocks".
The problems only appeared after migrating the project from the development server to the production server. I'm not sure if it's due to caching or MIME-types or something else.
According to your comment it seems that your server doesn't send the right headers.
You could solve this by adding the following to your .htaccess file:
<FilesMatch ".(ttf|otf|eot|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
If you load the files (bootstrap and font-awesome) from a CDN and not from your server use the following:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
Also make sure that you don't load font-awesome multiple times.
Your minified CSS already contains the font-awesome and bootstrap.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html
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 :)
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.
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;
}
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).
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!
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)
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!
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 />
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)
Could there be any problems moving favicons and apple touch icons to a subfolder?
Like:
<link rel="shortcut icon" href="/images/favicons/favicon.ico">
<link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png">
Yes, some browsers start downloading /favicon.ico at the same time they start downloading HTML document. If there's no file you'll get an extra 404 in your server log and the browser will have to make an extra HTTP request when it recognizes the icon is elsewhere.
A quote from Yahoo's Best Practices for Speeding Up Your Web Site:
The favicon.ico is an image that stays
in the root of your server. It's a
necessary evil because even if you
don't care about it the browser will
still request it, so it's better not
to respond with a 404 Not Found. Also
since it's on the same server, cookies
are sent every time it's requested.
This image also interferes with the
download sequence, for example in IE
when you request extra components in
the onload, the favicon will be
downloaded before these extra
components.
The only problem could be that your relative link is not under the root domain, so that
HOST / YourPath /images/favicon.ico
can be found difficult.
If that would be the case then you would need to include a base href tag in your document and then this would be solved.
p.s. here is the parser i'm writing now to auto download favicons, find yourself in the flow: http://plugins.trac.wordpress.org/browser/wp-favicons/trunk/includes/class-http.php