@font-face not working on Wordpress site in Firefox

[simplypixie]

Can anyone help with this please (I have read a lot and cannot see an issue with what I am doing and it is driving me mad). My css for the @font-face is:

@font-face {
    font-family: 'NotethisRegular';
    src: url("fonts/Note_this-webfont.eot");
    src: url("fonts/Note_this-webfont.ttf") format('truetype'),
         url("fonts/Note_this-webfont.svg#NotethisRegular") format('svg');
    font-weight: normal;
    font-style: normal;

}

The fonts folder is within the theme folder and the css is in the main style sheet for the theme yet on Firefox it is reverting to the 2nd font in the paragraph declaration.

You can see the site here and it is the text next to the telephone and other 2 icons toards the bottom of the page Click Here

[simplypixie]

Anyone please??

[PierlucSS]

Hi pixie,

You are mising the .woff file, which I believe is the only one supported by Firefox.

Font face definition should look like this:

@font-face {
    font-family: 'NotethisRegular';
    src: url('NotethisRegular-webfont.eot');
    src: url('NotethisRegular-webfont.eot?#iefix') format('embedded-opentype'),
         url('NotethisRegular-webfont.woff') format('woff'),
         url('NotethisRegular-webfont.ttf') format('truetype'),
         url('NotethisRegular-webfont.svg#NotethisRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

If you dont have the .woff variant, you can probably get it on font-squirrel.

[Directory777]

Is not there an easier way to get the font?

[simplypixie]

Hi PierlucSS - sorry, not sure why it isn't on there as I do have it in my stylesheet now and thought it was before:

@font-face {
    font-family: 'NoteThisRegular';
    src: url('Note_this-webfont.eot');
    src: local('☺'), url('Note_this-webfont.eot?#iefix') format('embedded-opentype'),
         url('Note_this-webfont.woff') format('woff'),
         url('Note_this-webfont.ttf') format('truetype'),
         url('Note_this-webfont.svg#NotethisRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have also added this to my .htaccess:

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

I have also tried with the fonts in a folder (same level as stylesheet) and out or a folder.

It still doesn't work though and is driving me mad.

[simplypixie]

Directory777 - not at the moment if you want to use a 'non-standard' font.

[simplypixie]

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' ); ?>">