@font-face font will not load/work in Firefox

HTML & CSS
1

Sorry, I can see that this has been asked a few times now but I have tried a lot of possible solutions and checked everything is correct, which I am sure it is, and yet in Firefox my css declaration is reverting to the 2nd font in the list rather than using the @font-face font. I am not entirely sure how to check the font is being loaded or if there are any issues through Firebug, otherwise that would be my next step.

Can anyone see why please:

  1. The site in question is www.jondell.co.uk and it is the text next to the phone, info and facebook icons toward the bottom of the page
  2. The fonts are stored in a folder called fonts (all lower case) and this folder is in the same folder as the stylesheet (this is a Wordpress site so both are in the theme folder)
  3. My CSS for the font declaration and where I use it is:

    @font-face { font-family: 'NoteThisRegular'; src: url('fonts/Note_this-webfont.eot'); src: url('fonts/Note_this-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/Note_this-webfont.woff') format('woff'), url('fonts/Note_this-webfont.ttf') format('truetype'), url('fonts/Note_this-webfont.svg#NotethisRegular') format('svg'); font-weight: normal; font-style: normal; } #icons-container p { font-family: "NoteThisRegular", "Lucida Handwriting", Helvetica, sans-serif; font-size: 1.05em; }
  4. The fonts are all uploaded to the server and I have just re-created them at Font Squirrel to be sure (the font is from there anyway so no issues with usage).

If anyone can help please, it is driving me made.

2

Try adding in the bit in red below:

@font-face {    font-family: 'NoteThisRegular';
    src: url('fonts/Note_this-webfont.eot');
    src: [COLOR="#FF0000"]local('☺'),[/COLOR] url('fonts/Note_this-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Note_this-webfont.woff') format('woff'),
         url('fonts/Note_this-webfont.ttf') format('truetype'),
         url('fonts/Note_this-webfont.svg#NotethisRegular') format('svg');
    font-weight: normal;
    font-style: normal;

FontSquirrel fonts often have that bit in it, and it fixes it for me when I make this change via Firebug. :slight_smile:

3

Thank you. I have run in Firebug and I can see it works (well it is the correct font now anyway, even if in bold) but if I add to my stylesheet and upload to the server it is making no difference.

4

Ah, right. :frowning:

OK, see if the suggestion in this post helps:

5

I have already read through those posts and am sure I have tried everything suggested before I posted myself - or am I missing something (i.e. which bit should I be trying from the thread)?

Ignore this, I have found the post in the thread now.

I have tried this before but will do so again now that I have altered the stylesheet as you suggested and see if it works.

6

Still no good :frowning:

As it is a Wordpress site, could it be something in a plugin that could be causing a conflict?

7

It looks like your web server (Apache 2) isn’t sending a Content-Type for the .woff file, which causes FF not to recognise it as a font and causes it to ignore the file.

To instruct Apache to send the correct header, put the following in an .htaccess file (if you don’t know what that is, google it :))


AddType application/x-font-woff        woff

(see http://html5boilerplate.com/template/htaccess.txt?.xml)

8

Have added the line to my .htaccess file but still no joy - this is madness

9

And what if add all of them?



# Webfonts                             
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf    ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Also make sure to clear your cache before you reload to make sure the browser received the new headers and is not using the cached old ones.

10

I have now added all of them and again cleared the cache (had already done that) but still a no go.

11

In case anyone is interested I have finally ( after hours of more research, fiddling and testing) found a way to resolve this issue which stems from the url generated by the generic Wordpress stylesheet link

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

What I have done is created a separate stylesheet in the fonts folder called typography.css and moved the font declarations to there (removing them from my main stylesheet). I have then linked directly to that stylesheet from the header.php file in my WP theme using a full URL (though this seems a contradiction to everything I have read about FF not liking absolute URL’s) like this:

<link rel="stylesheet" href="http://www.jondell.co.uk/wp-content/themes/jondell/fonts/typography.css" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
12

Glad you found a solution, chilli11, and thanks for posting it here. This kind of thread comes up fairly often, so this will probably be of great help to others who follow. :slight_smile:

13

No problem, lets hope it helps someone as it took me days to find a solution which I couldn’t believe really.