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.
Related
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.
I am trying to force the Browser to download a HOSTS file to the users computer but it always opens the file in a new window. If i right-click the link and choose Save As the browser adds a .txt extension to it, NOT GOOD.
You can view my page here:
http://lovespec.bugs3.com/Host_File.html
I also have an .htaccess file on my server but I don't know what to put there to force the browser to download the file. Any help would be much appreciated.
Try this in your .htaccess
<Directory />
<IfModule mod_headers.c>
<FilesMatch "hosts">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
</IfModule>
</Directory>
Just a trick for the browser to think it's opening a non-text file.
Have you simply tried to add ? This will redirect and download it,by it self.
Let me know if that simply solution doesn't work. Working in some cases.
So here you have an showoff of my example.
Example here !
Here is the problem, try to load a css file from a folder and get the console error: "Resource interpreted as Stylesheet but transferred with MIME type text/html". Try to fix it by adding .htaccess file (in the root/in same folder as css) with "AddType text/css .css" in it, but it is completly ignored.
How can it be fix?
(Don't know if matters but I'm in windows 8.1 and WAMP)
Appreciate any feedback.
Try this:
<FilesMatch "(\.css)$">
AddType text/css .css
Header set Content-Type text/css
</FilesMatch>
But you really shouldn't have to. text/html is normal.
Because of a security issue it is not enough to set style sheet "rel" tag type property to text/css, you should set content type in http headers(content-type:text/css), it seems you use Apache but in case another person have this problem in IIS and see this page: go to control panel -> programs and features -> turn windows features on or off -> internet information services -> world wide web services -> common http features -> static content, enable this option and restart your IIS.
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>
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