Opera @font-face displays Japanese(?) characters when using data-icon attr

[nickhempsey]

Hey Gang,

For some reason in Opera I’m getting a weird result from @font-face (Entypo) when using the data-icon attribute. I’m also using a font from Google Webfonts (Source Sans Pro) and that one shows up properly.

Anyway, Instead of displaying the actual icon, it’s displaying Japanese characters. They might not be Japanese… I’m not familiar enough with Eastern characters to the know difference, regardless, it’s not working. It works fine on every other browser.

Here’s some code and junk.

CSS @font-face setup:

@font-face {
font-family: “entypo”;
src:url(‘../fonts/entypo.eot’);
src:url(‘../fonts/entypo.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/entypo.svg#entypo’) format(‘svg’),
url(‘../fonts/entypo.woff’) format(‘woff’),
url(‘../fonts/entypo.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: “entypo”;
content: attr(data-icon);
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

Link to the build: 2013.mikeisspeaking.com

Now, I’m not really worried too much as the traffic on this site via Opera is minimal to say the least. However, at this point, I just want to know why this is happening.

Thanks friends!

[chrisburton]

@nichhempsey Hey. I’m not seeing the icons you’re referring to.

[nickhempsey]

here’s a screen cap: http://cl.ly/LwKr

they’re in the third section from the bottom. The dark blue band with the video in it.

It’s supposed to be quotes, facebook, twitter, and email icons.

The site is live now… http://mikeisspeaking.com

[Andy Howells]

Working fine for me in Opera.

[nickhempsey]

Interesting… I thought maybe I had a rogue install of Opera. So I reinstalled and it’s still all screwy. I hit up BrowserStack and it’s showing up fine on a bunch of versions of Opera and different OS’s. I guess I’m calling this an error on my system. Blerg…

[djrolstad]

I always find that if you have lots of fonts in your system, it acts differently.

[Author]

Posts