www.webdeveloper.com
Results 1 to 3 of 3

Thread: @font-face not working in Wordpress in Firefox live (but working locally)

Hybrid View

  1. #1
    Join Date
    Feb 2006
    Posts
    116

    @font-face not working in Wordpress in Firefox live (but working locally)

    To make a long story short, I'm having trouble getting @font-face CSS declarations to work on my live site in Firefox (and IE9, apparently). But things work just fine locally.

    Here's the site:
    http://www.blackmountainsoftware.com

    Here's the situation:
    Client is hosting WordPress on their own servers, against our advice. That has caused a slew of other problems and may factor in here.

    I'm embedding the font, just as I always have, using the following code, following the advice listed here:
    Code:
    @font-face {
        font-family: 'ChunkFiveRegular';
        src: url('fonts/Chunkfive-webfont.eot');
        src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/Chunkfive-webfont.woff') format('woff'),
             url('fonts/Chunkfive-webfont.ttf') format('truetype'),
             url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    h1, h2, h3 {
    	font-family: "ChunkFiveRegular", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    }
    Before we were having issues with Firefox not loading the font files, but that turned out to be some kind of MIME type issue that their IT guy fixed. Now, however, using Firebug, I can see that the font files are definitely being loaded, but not being displayed. Any text that references the @font-face style blanks on first load and then just loads the default font.

    I thought it may have been their server (after the MIME type issues), so I created a test page (located HERE) with just the bare minimum of stuff on it to test and see if the fonts would display. Somehow, they do, so it appears to be a WordPress issue. Although, I don't know what to do about it because it's the same way that I've always used @font-face, just on a client's server rather than a legitimate host.

    Does anybody have any suggestion as to what's going on here? I'd be happy to provide more code if that helps, but I have no idea what else could be affecting it.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Works fine for me in Firefox 3.6 portable, 10 portable, and 11. You may have cached a bad font-file which is why it's not showing. Make 100% sure your cache is clear and give it another go, it's working (on both the website and the test page) in all versions of Firefox I have.

  3. #3
    Join Date
    Feb 2006
    Posts
    116
    Yeah, I've done all that and still nothing in Firefox. However, I did try using a proxy server and everything works fine. How could it possibly have something to do with my connection? I've never had this problem before...

    And now, as an extra level of weirdness, if I got to another page, the font loads fine. And if I follow links back to the home page, the font loads fine.

    So, it's almost definitely something to do with the order in which I'm loading things, but I don't get that. My CSS is the first thing to load the head on the page and the @font-face declaration is at the very top of my CSS file. I even tried putting the @font-face directly into a <style> tag in the head to no avail.

    Now I'm thoroughly confused...

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