Font awesome not working in Mozilla - html

I am using Font-awesome for a webpage, and it works fine in Chrome and Safari, but not in Firefox. Instead of class="fa-star", I get little rectangles.
I did a research and found that I have to put
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
at the top of .htaccess file. It still doesn't work.
How can I solve this?

Related

Cache all files but except index.html - Apache

I want to cache all files as they don't change but not cache the main index.html page. My current htaccess:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
On some browsers like IOS Safari the index.html updates automatically and doesn't need refreshing but with Google Chrome I need to refresh the page to see the updated page.
After researching I'm assuming I need no-store, max-age=0. Would it be more efficient to use no-cache to check for modification?
I've tried this mashup, do you see any problems:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
<Files index.html>
Header set Cache-Control "no-store, max-age=0"
</Files>

When placing a new .pdf file with the same name on website, in iOS the cached file is downloaded

In .htaccess i have added a "Header set Cache-control" rule and is working fine (most of it) but in iOS this is not working due to the caching in iOS i think. Is there a solution to force refresh the new pdf files?
<IfModule mod_headers.c>
<FilesMatch ".(pdf)$">
Header set Cache-Control "max-age=0, public, must-revalidate"
</FilesMatch>
</IfModule>

Font Icons Not Showing Up

Hello I am working with Magento Version 1.9.0.1 I have been racking my head over and over and I can not get this to work. Any subdomain to my primary domain is not rendering the font-icons that came with the theme, the primary domain however is showing these icons. On another note Safari is rendering my font-icons from my subdomain but Chrome and FireFox are not. Here is what the Chrome Dev Console is outputting
Font from origin 'http://brandster.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://breezesta.brandster.com' is therefore not allowed access.
I did add this to the .htaccess file of the subdomain
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
and it is still not working. Can anyone please shed some light on this issue. Thanks in advance.
Seems as if your htaccess is blocking the use of files from other domains including sub-domains. Maybe try and see if this works?
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*.brandster.com"
</IfModule>
</FilesMatch>
So if that works for you.

HTML - Fonts will only display correct in Chrome but not in IE or Firefox

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>

firefox doesn't load external fonts

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.