WordPress.org

Ready to get started?Download WordPress

Forums

@font-face makes layout messed up (1 post)

  1. squidytopia
    Member
    Posted 3 years ago #

    Hi all,
    I'm using the Twenty Ten 1.2 theme on WordPress 3.1.4.

    I wanted to use the @font-face code on my layout, but whenever I define it on my style.css, it messes up my layout. It seems like it "disables" all the CSS and therefore the layout looks really bad (like it has no CSS defined at all).

    Here is how it supposed to look like (WITHOUT the font face code):
    http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/without_fontface.jpg
    You can also view it live: http://www.ifgfdallas.org

    Now, here is how it looks like, all messed-up, when I put on the font-face code:
    http://i213.photobucket.com/albums/cc134/ifgfdallas/Web%20Stuffs/with_fontface.jpg

    And this is the code that it put in:

    @font-face {
        font-family: Museo Sans;
        src: url("fonts/MuseoSans.eot");
        src: local('Museo Sans'), local(Museo Sans'),
        url("fonts/MuseoSans.otf") format('opentype'),
        url("fonts/MuseoSans.woff") format("woff"),
        url("fonts/MuseoSans.svg") format("svg");
    }

    Anyone has any clues? What did I do wrong?

    NOTE: I tested the layout on my old Firefox 3.6 and Google Chrome, and it actually worked fine WITH the font-face code. However, when I upgraded my Firefox to Firefox 5, the layout was all messed up, just because of that font-face code.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags