Font Icons Not Showing In Firefox

Posted on 2014-12-04
Medium Priority
Last Modified: 2014-12-05
Font icons not showing in FF. I have updated the .htaccess file using the file from https://github.com/h5bp/server-configs-apache which seems to contain all the needed code to "Allow cross-origin access to web fonts." Following various recommendations I have installed the .htaccess file in the root of www.pricelearman.com and www.pricelearman.com/clients/serenaconstruction. The font icons are being used in serenaconstruction/index.htm.  I have also tried putting the .htaccess file into the font folder next to the font icon files, as some have suggested. Nothing has worked. The font icon (red hamburger) displays in IE, Chrome and Safari, but not Firefox.
My copy of FF has "Allow pages to choose their own foots," checked. The linux server has mod_rewrite turned on.

I'm hoping one of the experts can point me in a different direction or work through a solution. The site in question can be seen at www.pricelearman.com/clients/serenaconstruction.
Question by:dlearman1
  • 4
  • 2
LVL 85

Expert Comment

by:David Johnson, CD, MVP
ID: 40482284
I can't see the difference
FirefoxChormeWhere should I be looking?

Are you referring to this in firefoxto the right of
LVL 84

Expert Comment

by:Dave Baldwin
ID: 40482330
Maybe Firefox doesn't like the fact that you are loading the fonts Twice.
<link href="./_css/ionicons.css" rel="stylesheet">
<link href="./_css/serena.css" rel="stylesheet">

Open in new window


Author Comment

ID: 40483424
To David
Yes the defaulted hamburger font is exactly the problem.

To Dave
Commenting out serena.css does not solve the problem.

Thank you both for your help and interest. The format of this forum has changed since I last used it. I don't see how to reply to each expert individually, so maybe I'm not replying in the correct way. Please let me know if I should be doing something different.

I'm thinking the problem is probably in the .htaccess file process.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 84

Expert Comment

by:Dave Baldwin
ID: 40483499
The Firefox Error Console says that the fonts are not downloading in 'serena.css' which why I suggested that.  It does Not show an error for 'ionicons.css'.  The URL for 'ionicons.css' has an underscore in front of '_fonts' and 'serena.css' does not.

In 'serena.css': url("../fonts/ionicons.woff?v=1.5.2") format("woff"),

In 'ionicons.css': url("../_fonts/ionicons/ionicons.woff?v=1.5.2")
LVL 84

Accepted Solution

Dave Baldwin earned 2000 total points
ID: 40483510
If you commented out Only the fonts in 'serena.css', it might work.  The way CSS works is that new definition overwrites a previous one and your font definitions in 'serena.css' come after the ones in 'ionicons.css'.

Author Closing Comment

ID: 40483567
Thanks Dave...You were right on. I didn't notice that I had loaded the fonts twice. Tunnel vision on the ,htaccess file or I would of realized that the fonts were embedded all along, and not even loaded from external domain. You saved me hours more of spinning Thanks so much.
LVL 84

Expert Comment

by:Dave Baldwin
ID: 40483885
You're welcome, glad to help.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question