www.webdeveloper.com
Results 1 to 2 of 2

Thread: @font face not working in firefox

  1. #1
    Join Date
    Dec 2008
    Posts
    138

    @font face not working in firefox

    I'm using CSS3 font-face on my website. Strangely it works when it is tested on a localhost but when it goes live it doesn't show in firefox. Below is the code and I even created a htaccess with the below mod in the font folder but it still doesn't work. Anyone can help?


    Code:
    @font-face {
     font-family: testfont;
     src: url("testfont.woff") format('woff'),
     src: url("testfont.ttf") format ('truetype'),
     src: url("testfont.eot") format ('eot')}

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

  2. #2
    Your fall-through order is out of order, and you really should include weight and style or it WILL be ignored in some browsers.

    Code:
    @font-face {
      font-family: 'testfont';
      src:	url('testfont.eot');
      src:	url('testfont.eot?#iefix') format('embedded-opentype'),
            url('testfont.woff') format('woff'),
            url('testfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    That order IS important, as is the 'double target' for IE. Also, your weight and style MUST match when you use it -- a limitation of webfonts is you can't auto-bold or auto-italic in all browsers. Which is why you can do multiple @font-face with the same font-family declaration, but different font-weight or font-style.

    No clue why you think you need to screw with the headers for them though... That whole "filesmatch" rule nonsense shouldn't be necessary at all unless you've got something else really jacktarded going on with the server.
    Last edited by deathshadow; 05-22-2014 at 02:53 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles