Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup:

In the main directory, there's a folder named fonts containing all font files along with a stylesheet called stylesheet.css:

@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;
}

The homepage is linking to this stylesheet as follows:

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

I have a navigation menu structured like 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>

The CSS styles for the navigation menu are stored in another file like so:

.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;
}

All works smoothly on other browsers except for Opera 11.x where it's failing to render properly. Any suggestions would be highly appreciated!

Answer №1

There are instances where this issue arises due to the font file being served with an unfamiliar or unexpected content type header.

To resolve this, make sure that your WOFF and TTF files are served with a

Content-Type: "application/octet-stream"
header.

If you are using Apache, you can add the following lines 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>

(If the above solution does not work, please provide a jsFiddle of your code for further assistance.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with connecting Drupal 8 theme styling to website pages

Although the theme is functioning properly, the CSS styles are not being applied. Even when inspecting the developer console in Firefox, there seems to be a disconnect with the page. I verified that manually applying the CSS through the developer console i ...

Special Bootstrap's hamburger menu

My website has a vertical navigation bar with a breakpoint set for medium-sized screens to display a hamburger menu. When the hamburger menu appears, I want to hide the text following the icons to save space and only show the icons. Clicking on the hamburg ...

As you hover over the div, the content inside subtly shifts upwards and downwards

I am facing an issue with my movie list. When hovering over a movie, a border appears around it as expected. However, I also notice that at the same time, it seems like extra padding is being added to the 'top' and 'bottom', causing the ...

Ways to customize the appearance of an iframe's content from a separate domain

I am facing a challenge with my widget and multiple websites. The widget is hosted on one domain, but the websites use an iframe to display it. Unfortunately, because of the Same Origin Policy, I cannot style the content of the iframe from the parent websi ...

IE6/7 dilemma with CSS floating

Encountering a strange CSS float issue in IE6 and IE7. The HTML code looks like this: <fieldset style="float:left"> <legend>Summary</legend> <div class="display-label">Recruitment type</div> <div class="displa ...

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Recently, I made the decision to switch to using SVG symbols for one of my projects. However, I encountered a challenge as I needed these SVGs to be responsive. My main objective was to minimize the number of HTTP requests, leading me to explore the option ...

Is there a way to use jQuery to verify if an LI element contains a parent LI element?

Struggling with customizing the comments section of a WordPress theme? Utilizing jQuery for styling can be tricky, especially when dealing with nested UL elements like admin comments. The challenge lies in traversing the DOM structure to target specific el ...

A new ASP.NET MVC-5 web application is missing the class definition for "input-validation-error."

I recently created a new ASP.NET MVC-5 web application using Visual Studio 2013. When I attempted to use the built-in login form and left the required fields empty, I noticed that the fields were not highlighted in red as expected. https://i.sstatic.net/m ...

Can you explain how this particular web service uses JSON to display slide images?

{ "gallery_images": [ {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433518577.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img/big/1_1433519494.jpg"}, {"img":"http://www.jcwholesale.co.uk/slider_img ...

What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using: * { margin: 0; padding: 0; box-sizing: border-box; } h1 { margin: 1rem; } ul { posit ...

Trouble adjusting opacity with CSS in @media queries for maximum width restrictions

When building a webpage with a collapsible header and a fading large logo that transitions to a smaller version in a different location upon scrolling down on the desktop view, there seems to be an issue. The smaller logo's opacity property does not r ...

Angular JS is having some issues with rendering the style correctly

How can I make input fields turn pink before values are entered and green after values are entered? Currently, the styling only applies to the first row. What could be causing this issue? <script src="https://ajax.googleapis.com/ajax/libs/angularjs ...

"Enhance your browsing experience with Chrome by automatically changing the background when

I am currently using Chrome with a CSS3 background. <h4 class="title-name clearfix"><a href="****************">Fairy Tail - LUCY</a> </h4> My issue is that when I hover my mouse over the title, the ba ...

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

What is preventing Firefox and IE from displaying images fully in a list item?

I am trying to create a slideshow with two separate sliders using li elements for that purpose. It works perfectly in Chrome and Safari, but I am encountering issues in Firefox and IE. In Firefox, the slideshow works fine in quirks mode but not in standar ...

developing a multimedia player using HTML5

I'm attempting to create a dynamic video "collage" that showcases videos with different aspect ratios in a flexible grid layout. Each row should have videos of the same height, while filling up the horizontal space within a container. With known widt ...

relocate HTML components

I've been trying to reposition HTML elements within the body of a webpage, but I'm struggling with getting a form tag to appear exactly in the center of the browser - and only that form tag. Can anyone offer guidance or suggest relevant topics fo ...

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

Diverse positioning across various browsers

I have a navigation menu with alternating divs - one containing a menu link and the other a 'menu separator' div with a 2px wide 'separator bar' image. The width of the separator divs is set to 24px to create proper separations. For so ...