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

  • B1gJ4k3

    (@b1gj4k3)


    12 years, 1 month ago

    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:

    @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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter B1gJ4k3

    (@b1gj4k3)

    12 years, 1 month ago

    For reference, “Why Black Mountain?” and “We live where you do” on the homepage of the live site should both be in a really thick, slab-serif type font (not Times or whatever they are defaulting to now if you’re looking in Firefox)

    Thread Starter B1gJ4k3

    (@b1gj4k3)

    12 years, 1 month ago

    Alright, 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.

    The investigation continues…

    lcrdd

    (@lcrdd)

    11 years, 11 months ago

    I noticed that your site is showing the correct font in Firefox and I wondered what you did to make this work. I am having the same issue but no luck resolving it.

    Thread Starter B1gJ4k3

    (@b1gj4k3)

    11 years, 11 months ago

    I wish I could remember how it got fixed, but sadly, I do not. I do know that I change the syntax of the @font-face declaration to this:

    @font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('ò∫'),
		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#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

    Whether or not that is what did it, I don’t really know. Sorry I couldn’t be of more help. To be honest, I have worked pretty hard to forget this project…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘@font-face not working in Firefox live (but working locally)’ is closed to new replies.