Search code examples
jqueryfont-face

FontFace for jquery appended text

I'm doing a rotating banner on my site. This banner is a mix of images and text. I got it working great except that my @fontface font is not working with the text.

I'm doing something like this for the rotation: 

$("#container div").first().appendTo('#container').fadeOut(5000);
$("#container div").first().fadeIn(5000);

So I'm assuming it has something to do with the appended text after the font is applied. Or something. I'm fairly new to fontface, so this may be something I'm doing wrong.

Relevant CSS:

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
     url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
     url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#homecontainer span {
    float: right;
    display:block;
    font-family:OpenSansRegular,Ariel, Helvetica, sans-serif;
}

The text is showing up as Ariel. The rest of the text that uses this font works fine. Any ideas?

Solution

  • Try:

    font-family:OpenSansRegular,Ariel, Helvetica, sans-serif;

    to

    font-family:'OpenSansRegular',Ariel, Helvetica, sans-serif;

    Also double check your CSS selection with something obnoxious font-size:50px;color:pink; to make sure you are actually applying that font to the proper region.