Search code examples
internet-explorercross-browserfont-face

Cross Browser Font Embedding


I've been having some issues embedding fonts to work with all browsers. I know there are plenty of sources online and most of them suggest using the following CSS:

    @font-face {
    font-family:HelveticaNeue;
    src: url('NeueUltEx.eot');
    src: url('NeueUltEx.woff') format('woff'),
             url('NeueUltEx.ttf') format('truetype'), 
         url('NeueUltEx.svg') format('svg');
}

I've checked and rechecked and everything works fine except for IE. I've correctly pointed to the fonts, but something's not working out. Here are the CSS rules that use the fonts, perhaps it's not the actual embedding, but the usage.

   #statictext {

        position: absolute;
        font-family:HelveticaNeue;
        font-size: 85px;
        top: 50%;
        left: 50%;
        margin: -213px 0 0 -278px;
        color: #f5faff;
        text-shadow: 2px 3px 3px rgba(27,39,53,0.42);

}

     form textarea {

        position: absolute;
        background: transparent;
        opacity: .65;
        height: 250px;
        width: 550px;
        outline: none;
        resize: none;
        border: none;
        padding: 30px;
        font-size: 20px;
        font-family:HelveticaNeue;
        color: #2a5b81;
        overflow: auto;
        top: 50%;
        left: 50%;
        margin: -122px 0 0 -270px;
}

Thanks. Any help would be appreciated. As mentioned above, it's IE where I'm having trouble.


Solution

  • Possible Duplicate Issue Here

    I believe this issue was resolved and works in all browsers.

    The Duplicate Issue points to this website that lists the most up to date font face fixes:

    Click Me