Grow your CSS skills. Land your dream job.

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

  • # January 3, 2013 at 12:19 pm

    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!

    # January 3, 2013 at 10:45 pm

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

    # January 4, 2013 at 8:12 am

    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

    # January 4, 2013 at 8:50 am

    Working fine for me in Opera.

    # January 4, 2013 at 9:00 am

    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…

    # January 4, 2013 at 2:03 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".