On a 404 page for my website, I'am having .htaccess file in the root directory where am using this rule
ErrorDocument 404 www.abc.com/404.html
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
Thought the fonts type are working without throwing any error, the 404.html is not working.
Am i missing something
From the Apache documentation:
A local URL to redirect to (if the action begins with a "/").
An external URL to redirect to (if the action is a valid URL).
Text to be displayed (if none of the above). The text must be wrapped in quotes (") if it consists of more than one word.
I think you missed the protocol part from the URL. As Darren suggests you can use absolute paths too on your server.
Related
I have created a new page on my company website. It looks awesome but only in Google Chrome.
The fonts do not display correctly within Internet explorer nor Firefox.
Here is the link to the page. (the actual content is inside an iframe which is http://www.lynch.ie/test/map.html)
http://www.lynch.ie/test/test.html
Thanks,
Please help me, im on my knees with this one! Thank you in advance.
David L.
It seems that you're loading the font files from a different domain.
Firefox and possibly IE do not allow that unless you set a Access-Control-Allow-Origin header, sample (credits to Callum Silcock's blog article):
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
i read this article about firefox and the external fonts:
http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html
it says that i should put some code into my apatche config:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
i've got to the path: apache\apache2.2.22\conf\httpd.conf and put those lines but in firebug, the response headers didn't changed at all.
i want to mention that the article said something about loading the headers module if it's not loaded
any idea to load the headers module in the httpd.conf file, or to make the firefox accept external fonts?
You might need this somewhere in your Apache config:
LoadModule headers_module modules/mod_headers.so
If you're on Windows, it would probably be mod_headers.dll, or something slightly different. You should probably look at other LoadModule statements in your httpd.conf to figure out the appropriate version.
I already had the same problem. I was adviced to generate my web fonts with a tool like FontSquirrel. Upload your font's files and download back a compatible pack. Include the css in your HTML page in addition to yours. And it seems to work since I do like this. I hope it will be the same for you.
I keep getting this warning
Resource interpreted as Font but transferred with MIME type application/octet-stream: "http://127.0.0.1:8080/assets/font/fontawesome-webfont.woff".
I am using Play 2.0.4 webserver. I added the mime-types to my application.conf file as follows
mimetype.eot = application/vnd.ms-fontobject
mimetype.otf = application/octet-stream
mimetype.ttf=application/x-font-ttf
mimetype.woff = application/x-font-woff
Any idea what I may be doing wrong.
Actually, I found the answer:
Some browsers, like Google Chrome, will show this warning when a font
is downloaded from a web server that sets an unexpected MIME type for
fonts.
For many font types, there is a solution!
Update the configuration for your web server with the following MIME
type per font file extension:
.ttf — font/truetype
.otf — font/opentype
.eot — application/vnd.ms-fontobject
.woff — application/x-font-woff
If you
are using Apache configuration, you may include the AddType directive
for each font type:
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType application/x-font-woff woff
AddType font/opentype otf
With a specific MIME type configured per font, and not the generic
application/octet-stream MIME type, you should no longer see a warning
in your web browser console.
This configuration — while effective for cleaning up your console —
does not include the technically correct MIME type for fonts like OTF,
TTF, and WOFF. For these font types, an official MIME type has not
(yet) been approved. An official type for WOFF — application/font-woff
— has been requested.AddType font/opentype otf
http://www.jbarker.com/blog/2011/resource-interpreted-font-transferred-mime-type
For my IIS instance, i had to use the following:
.woff — application/font-woff (not application/x-font-woff)
See:
Resource interpreted as Font but transferred with MIME type application/x-font-woff
http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/
If you're using a Rack-based app, you can amend the Rack::Mime::MIME_TYPES hash in your config.ru:
# Additional mime types
Rack::Mime::MIME_TYPES.merge!({
".eot" => "application/vnd.ms-fontobject",
".ttf" => "font/ttf",
".otf" => "font/otf",
".woff" => "application/x-font-woff"
})
I have tried everything and cannot figure this out, I am not terribly knowledgable about servers and setting them up, the company that this site is on decided to run their website off of GoDaddy servers which leads me to believe that might be at the root of this problem but I will try to explain this as best as I can.
I have a simple HTML page, with some css...when the css is inclusive on the page itself it works fine.
IE
<html>
<head>
<style>
#topbanner {
position:absolute;
top: 0;
height: 40px;
width:100%;
background-color:#000;
opacity: .5;
}
#map {
margin: 0 auto;
background: url(img/jeanmap.png);
height:679px;
width: 1024px;
position: relative;
}
</style>
</head>
<body>
etc... etc...
however when I link the same css styles via a stylesheet, I get nothing on my page, literally nothing.
IE
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
etc... etc...
When testing in Firefox I get no errors, and I can see all the styles in the .css file and I can download it, in Chrome I dont see my styles but can download it, and in Chrome I get the following error, Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php
I also link to a few javascript scripts as well and those give the same error but do load, but obviously nothing works because my css is empty.
What exactly is the issue here, I have never had this happen before and am so lost.
I dont believe its a server issue as in the root folder I do the same thing and it works fine, this is just in a folder and it still isnt working there
to clarify this is my file structure
root/
index.php
css/
img/
js/
problematic folder/
index.php
css/
style.css
img/
js/
the reasoning for having another css folder and another img folder and another js folder is because this is a secondary project that eventually will end up on its own server but for now for testing and working out the design it is nested on my server.
I have a my .htaccess in my root folder with the following...
# add various mime types
AddType text/html .html .htm
AddType image/x-icon .ico
AddType text/css .css
AddType text/javascript .js
AddType audio/mpeg .mp3
AddType audio/mp4 .m4a
AddType audio/ogg .ogg
AddType audio/ogg .oga
AddType audio/webm .webma
AddType audio/wav .wav
AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogg
and also tried adding an htaccess file in the problematic directory but that didnt help either
This may be a server configuration problem. If you are using Apache look here.
AddType text/css .css
please read all of this before commenting.
I'm currently working on a large website which is hosted on Amazon Web Services (AWS). This allows us to use scalability features in situations where the website might take a big traffic load.
Originally we started by separating out the code of the website a mix of HTML/PHP/Java etc and have static assets on a separate server. When I first tried using font-face in this setup I found that Firefox and IE would not load the font, and quickly discovered it was a cross-domain issue. There are a variety of solutions to this, which include modifying headers to allow access to the font files. However, the storage system we're using doesn't allow for this type of header modification.
In a bid to see if I could just get the fonts to work across all browsers I moved them and the CSS file that calls them to the same domain as the website. However they still don't seem to load up in Firefox or IE. If I copy the code and run it locally in my documents everything seems fine in all browsers (so the files cannot be corrupt). Firefox is definitely finding the files as I can see them being loaded via FireBug.
I've checked all URLs to make sure they're correct and resolve where they should.
Here's the font-face CSS I'm using with the smiley hack:
#font-face {
font-family : "AllerRegular";
src : url('aller_rg-webfont.eot');
src : local('☺'),
url('aller_rg-webfont.woff') format('woff'),
url('aller_rg-webfont.ttf') format('truetype'),
url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
font-weight : normal;
font-style : normal;
}
The CSS file sits in the same directory as the fonts.
I also have the MIME types set in a .htaccess file which sits in the same folder as the fonts.
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you have any ideas please suggest. I've been searching the web for a few days now but all solutions have failed me.
Currently, serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. See this post on the AWS forums. Seems to be a problem for a lot of people.
Update 7/17/12:
As an alternative to AWS, Google's cloud services support cross-origin file serving. I just set up a bucket to serve webfonts, and it seems to be working. See this blog post and the documentation for more info.
Try do this:
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
My problem solved with this method.
This is possible using S3 without Cloudfront by adding the following CORS configuration.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
http://html5hacks.com/blog/2012/11/18/configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font/
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
You may well need to add support for the MIME types on the new hosting environment.
Take a look at:
http://www.jbarker.com/blog/2011/web-fonts-mime-types