Lightbox shows UTF-8 characters instead of arrows [closed]

What's supposed to be happening

The PrettyPhoto styles in prettyPhoto.css (part of the WooCommerce plugin) has a font icon defined called WooCommerce. The full definition of the style is below:

@font-face {    font-family: "WooCommerce";    font-style: normal;    font-weight: 400;    src: url("../fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("../fonts/WooCommerce.woff") format("woff"), url("../fonts/WooCommerce.ttf") format("truetype"), url("../fonts/WooCommerce.svg#WooCommerce") format("svg");}

And then they're using this icon font to style those buttons as seen further into prettyPhoto.css:

div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_arrow_previous:before {  font-family: WooCommerce;  content: "\e00b";  display: block;  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  text-align: center;  text-indent: 0;}

The problem

Firefox is (for some reason that I don't fully understand) acting like it doesn't know what the WooCommerce icon font is.

I do see one problem... The SVG file (as reference in their @font-face declaration is bad. Visit here to see: http://switch-witch.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg

The only thing I suspect is that Firefox is hitting that SVG when parsing the CSS and bomb out (thus making Firefox think that font isn't available or usable). I would expect Firefox to gracefully degrade and move to the next good usable src.

To confirm if this is the issue, you can try a couple of things.

1. Delete WooCommerce.svg from /plugins/woocommerce/assets/fonts/. Maybe Firefox will be okay with a missing SVG rather than a bad one?

2. Remove the reference to it from the prettyPhoto.css file. (It's a minified file, so it'll be a little more difficult to find, but it's right at the beginning of the file so it shouldn't be too bad to find it).

If that fixes the problem I would report the issue to the WooCommerce support team. It'll only be temporarily fixed. (If you update the plugin and they haven't solved the issue then it'll break for you again).

I had the same issue in both browsers and my first suspect was the WooCommerce case sensivity in my apache, and tried to replace it with lowcase characters but it still failed.After struggling a few hours I finally found the problem was from the css file located in /wp-content/plugins/yith-woocommerce-ajax-navigation/assets/css (line 220):

ul.yith-wcan-list li.chosen a:before{    font-family: woocommerce;    speak: none;    font-variant: normal;    text-transform: none;    -webkit-font-smoothing: antialiased;    text-decoration: none;    font-weight: 400;    line-height: 1;    /* content:""; */ /* <<== here was the problem source in my case */    color: #a00;    margin-right: .618em;}

so I comment it out and everything is fine now.