Icons won't display in Firefox

[inbloome]

Hello,

I am hoping someone can assist me here as I’m at my wits end.

http://www.upbeats.co is my site.

Working just fine everywhere except Firefox, where the icons just won’t show. Myself and my dev have tried everything, including the .htaccess fix discussed here.

The issue is also discussed here so it is probably not a Kleo issue. http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

I’ve had countless discussions with my host (Media Temple), who say it’s not an issue on their end as it is browser specific. They do say this:

After reading that article you mentioned online, it appears that most of the people who are experiencing issues are using a CDN along with Firefox. Our Premium WordPress product does include 4 layers of caching, however, does not automatically come with a CDN or CDN services when provisioned. Unless you configured ProCDN, CloudFlare, or another CDN service on your own, this would not apply. Our premium WordPress product relies on Varnish, Memcached, PHP APC, and storage L2 caching, to maximize performance by minimizing calls to SSD. Please understand that these services cannot be disabled at the request of the customer, and are built into the Premium WordPress service.

It may be possible that Font Awesome may have compatibility issues with one of the other caching mechanisms, resulting in the issues you are experiencing. Unfortunately, never having used this framework myself, I’m not too familiar with it. You may need to contact the Font Awesome support team for more information and assistance.

I have not installed any caching mechanisms myself, but it seems there is a degree of caching on the host end (that I can’t turn off with the package I am on).

I would love any assistance or advice you can provide.

Because Kleo uses more than just Font Awesome, I am wondering if there is another plugin I can use with Kleo that will still allow the shortcodes to work, but is a locally hosted version of the icons – if that makes sense?

I will be ever so grateful for any support you can provide.

Justine

[Patagonia]

I just noticed this when viewing your site. I see that fontello.eot is called, not fontello.woff. Not sure if there is a specific reason or if it makes a difference. FireFox used to handle only woff, not sure what it does now (in my Kleo testing, always the woff gets loaded automatically)

Great site by the way!

PS: I test my site only in FireFox and never had problems, but use no CDN. Did you try with a different CDN or a free one like cloudflare?

[Abe]

Hi @inbloome
I guess your problem could have come from a plugin loading also FontAwesome. Anyway I see that now it is fixed.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[inbloome]

Hi @Abe, it is not fixed on my end, are you able to send me a screenshot of what you are seeing in Firefox?

[inbloome]

I am still really interested in finding a solution to this problem. If anyone else can assist me, please let me know.

@Patagonia, thank you for your reply. I believe the .htaccess fix should be calling all versions of the font because of the first line in the below:

COPY CODE

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

Is that not correct? Should I reorder them in that line? Should woff come first?

Also I don’t want to install any CDN as this has been highlighted as a problem in the first place rather than a solution. But thank you for replying, it’s good to thrash out potential fixes together.

[Patagonia]

Hi Inbloome,

I have no idea about the .htaccess, as I never edited this for the fonts, I just used the standard KLEO settings for fontello. It just seemed strange to me that on my theme the .woff is called (at least in FF), and on yours the EOT.

I am not sure if it is still the case, but before I think that FF was picky: the font files should be on the same domain and it should be woff, not eot. Again, this might have changed, I am no FF expert.

FYI, The icons on your site are still not showing up for me on FF.

Cheers

[Abe]

@inbloome I visited the site last time and the icons showed. Have you tried disabling some plugins and see it there is a change?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[inbloome]

Yes @Abe, I have done all the standard things one does to fix before coming to a user forum and expressing they are at their wits end. I’ve also googled the issue extensively (it’s not an unusual problem, it’s just unusual that the fix that everyone else seems to use does not work for my site), spoken to my host (who suggested I ask you how the Fontello icons are called from within the theme as I may be able to install another plugin to work around this issue), and all the usual plugin conflict tests.

Could you be so kind as to elaborate on how Fontello is called from within the theme, and address my original question about other plugins or methods that I can try to resolve this issue, I would greatly appreciate it. This issue has been unresolved for over 3 weeks now.

Thank you @Abe.

[Abe]

Hi there, I see all the resources load correctly. try to disable rtmedia just as a test. It that does not help try to add this directives in your .htaccess file from the root of the WordPress install, before or after WordPress generated lines:

COPY CODE

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[st]

The icons are not loading in FireFox for me after moving the wp-content directory. Perhaps these issues are related?

https://archived.seventhqueen.com/forums/topic/squeen_options_url-and-wp_content_dir

[adamlot]

@inbloome- these post back to june. I too am using media temple are you on the (GS) ? my icons load, however I am having 7 and sometime 9 second delays in loading. I was curious if you have found a solution?

Adam

[Author]

Posts