Why are WOFF Fonts not supported in Firefox
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY prince.kr
5 years ago
Digital-Marketing
0 comments comment

I have used universal font WOFF also known as Oswald for one of Drupal sites header navigation menu bar links as font style. A font(WOFF) is truly universal means the availability is improved and also the font uses less bandwidth with compressed data, which loads the websites faster.

I came across with a peculiar issue that, the font loads faster on all browsers (all versions) but not on Firefox. After checking the documentation for WOFF font and found that, it only supports lower versions of Firefox by default and not to higher versions.It doesn't mean that it wont support the higher versions of Firefox completely, but may depend for different versions of same fonts.

The following steps can fix hanging in Firefox:

  • Add the below code to the .htaccess file for compression
     AddType application/x-font-woff .woff 
  • Add the font in the theme css using @font-face
     @font-face {
      font-family: GentiumTest;
      src: url(fonts/GenR102.woff) format("woff"),
           url(fonts/GenR102.ttf) format("truetype");
    }
  • Add the different versions of same font in the css
     @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 300;
      src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
  • Add the custom font for the content as:
     h1 {
       font-family: Oswald, sans-serif;
    }

RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 03rd December 2013 / by Anoop John
In the last year or so we have been in the process of transitioning from a small business to a me Digital Marketing Content Marketing Lead Generation Leave a reply Your email address will not be published. Required fields are marked * TheAnand (not verified) access_time 27 Nov 2020 - 16:24 Hey, This will be interesting to follow! Looking forward to see your learnings from new media and do let me know if you need any help with optimizing your digital media marketing initiatives. Anoop John access_time 27 Nov 2020 - 16:24 In reply to all the best by TheAnand (not verified) Thanks Anand for the offer to help. Will probably have a lot of questions as I move along. Would definitely need help from people like you to answer these questions. Anoop Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.