Question

I’m running into an issue with Opera not rendering my HTML5 site properly. The site and my @font-face are working perfectly in Safari, Chrome, IE9, Firefox 3.5+, etc. I’m wondering if someone has run into this issue before and how they fixed it. Here’s a breakdown of my code:

In the root I have a folder called fonts. This folder has all my font files and a stylesheet called stylesheet.css that looks like this:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('League_Gothic-webfont.eot');
    src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('League_Gothic-webfont.woff') format('woff'),
         url('League_Gothic-webfont.ttf') format('truetype'),
         url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

My home page is referencing this stylesheet accordingly:

<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css"/> 

I have a menu that looks similar to this:

<nav>
    <div class="main_nav">
        <div class="nav_button">
            <ul>
                <li class="red"><a href="index.htm">HOME</a>
                    <ul>
                        <li><a href="about.htm">ABOUT</a>
                            <ul>
                                <li><a href="history.htm">History</a></li>
                                <li><a href="management.htm">Management</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            ...
        </div>
    </div>
</nav>

My styles for this menu in another file look like this:

.nav_button {height:110px; margin:0px 1px 0px 0px; font: 34px 'LeagueGothicRegular', Arial, sans-serif; letter-spacing: 0; line-height:34px; float:left;}

.nav_button ul { 
    margin: 0px 0px 0px 0px;
    padding: 0px;
    display:block;
    float: left;
    position: relative;
    list-style: none;
    cursor:pointer;
}
.nav_button ul li { 
    margin: 0px 0px 0px 0px;
    padding: 0px;

    float: left;
    position: relative;
    list-style: none;
}

Again, this code works fine in other browsers, it’s just barking in Opera 11.x and not rendering. Any help would be greatly appreciated!

Answer 1

This can happen sometimes when the font file is served with an unknown or unexpected content type header.

Verify that your WOFF and TTF files are being served with an Content-Type: "application/octet-stream" header.

If you’re using Apache, add the following to your .htaccess file.

<IfModule mod_headers.c>
  <FilesMatch "\.woff$">
     Header set Content-Type "application/octet-stream"
  </FilesMatch>

  <FilesMatch "\.ttf$">
     Header set Content-Type application/octet-stream
  </FilesMatch>
</IfModule>

(And please post a jsFiddle of your code above if this doesn’t work.)