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
  • 212 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

A short, practical checklist that fills gaps left by the thread: Firefox will happily fall back to the next font when a downloadable font never actually loads. Common hidden causes are server-side (CORS or wrong MIME), the stylesheet base path (url() is resolved relative to the CSS file), or the browser rejecting an unsupported format. Use the Firefox Network Monitor and Console to see whether the font file is requested, what HTTP status and headers it returns, and any “downloadable font” / CORS messages. (developer.mozilla.org)

Minimal, high-value troubleshooting steps (run these in order):

  1. Open the font file URL directly in the browser to confirm it’s reachable and not 403/404.
  2. In the Network panel inspect the response headers: verify a correct Content-Type and whether an Access-Control-Allow-Origin header is present.
  3. If the font is being blocked by CORS, add a server rule so font files send the Access-Control-Allow-Origin header (example below). After changing server config, clear caches and re-test in Firefox.

Apache (.htaccess) example:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Nginx example:

location ~* \.(eot|ttf|woff|woff2|otf)$ {
  add_header Access-Control-Allow-Origin "*";
}

These server fixes and the general CORS facts are documented here. Also check font MIME types (font/woff, font/woff2, etc.). (cdnsun.com)

WordPress-specific notes (builds on and ): avoid hard-linking CSS in header.php if possible. Enqueue a small typography stylesheet from the theme folder so url() paths are predictable, or generate URLs with Theme functions. Example enqueue in functions.php:

function theme_enqueue_typography(){
  wp_enqueue_style( 'theme-typography', get_stylesheet_directory_uri() . '/fonts/typography.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_typography' );

Prefer serving modern formats in order (WOFF2 → WOFF → fallbacks) and set a font-display strategy such as swap to prevent invisible text while the font loads. (developer.wordpress.org)

Summary: combine the format/stylesheet-location checks already mentioned by and with the server-side CORS/MIME verification above. The Firefox console + network traces will point to the exact failure (missing header, bad MIME, 404, or blocked cross-origin).

Recommended Answers

All 6 Replies

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.