Member Avatar for 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

  • 3 Contributors
  • 6 Replies
  • 200 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by simplypixie
Member Avatar for simplypixie

Anyone please??

Member Avatar for 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.

Member Avatar for Directory777

Is not there an easier way to get the font?

Member Avatar for 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.

Member Avatar for simplypixie

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

Member Avatar for 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' ); ?>">
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.