Looking to Build/Redesign a Website or Blog ?

To speak to Rakshit, call +91 968 704 2303

[CSS3] Font Face is not working with Non WWW URL

Hi Friends,

In recent time, CSS3 font-face property is in lot of use. Font Face property of CSS3 is used when font is not a default font and you want to use it in your website. Meaning, Arial, Calibri etc etc fonts are default fonts which are installed in your PC and likely installed in all other user’s PC. If you want to use any stylish fonts, those fonts will not be there in other user’s PC. so even if you can see it working in your PC, it won’t work in other user’s PC.

In solution of this, font face is used. Instead of installing fonts in your local PC, you are placing font files on your server and load the fonts from there for all users. so all users can see the same fonts as you see in your PC. I came across one problem after installing the fonts using font face. My client complains that fonts are working fine for some pages and it is not working for some page.

It was a simple issue. It works with Non WWW but if i try to load page with WWW in URL, fonts did not work. This happens only in Firefox. I searched in Google and found that Firefox does not support cross domain fonts by default and even not the sub domains. This means, when you load the fonts in CSS Code, make sure it have WWW in URL or Non WWW in URL and put the redirect code for Non WWW to WWW or WWW to Non WWW using htaccess.

Code for @font-face – Use Absolute URL

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),


If this solution won’t work, try below solution. Create .htaccess file with below code and put the file in folder where your fonts are.

Code to put in .htaccess file

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"

I hope this helps and saves your time.


No Comments Yet.

Leave a Reply

Your email address will not be published.