The @font-face feature in IE11 encounters issues when utilized within an @media query

In my IE11 browser, I am utilizing fonts downloaded from MyFonts. When I specify them as shown below, they load without any issues:

@import url("//hello.myfonts.net/count/myFId"); 
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}   
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}

However, when I try to include these fonts within a media-query, they fail to load in IE11 (irrespective of the screen resolution), defaulting to Times New Roman instead.

@import url("//hello.myfonts.net/count/myFId");
@media all and (min-width:800px) {
    @font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}
    @font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}
}

Interestingly, Firefox and Chrome display the fonts correctly. I have confirmed that there are no conflicting font-face rules anywhere else, ruling out an inheritance issue.

Could this be a bug or am I overlooking something obvious?

The intention behind this setup is to cater for devices with slower connections, such as mobile devices, by switching to a more common font in those cases.

Answer №1

Through further investigation, I have identified the root cause and its corresponding solution.
The root cause can be attributed to:

The positioning of @import rules in a style sheet is crucial as it must precede all rule sets. An @import rule that comes after one or more rule sets will not be recognized. Source: SitePoint article

Luckily, the remedy is straightforward. By eliminating the media query from the style sheet and incorporating it into the HTML reference, both criteria are met while also eliminating an extra @import rule:

<link rel="stylesheet" href="/css/fonts.css" media="(min-width:800px)" />

Answer №2

Perhaps considering an alternative approach would be beneficial... Instead of defining the font within a media query, simply reference the font inside the media query itself. It seems logical that fonts should have a global scope and be called as needed.

@import url("//hello.myfonts.net/count/myFId"); 
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}   
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}

@media all and (min-width:800px) {
    div {
        font-family: 'HelveticaNeueLTStd-Lt';
    }
}

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

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. https://i.sstatic.net/WUOot.png However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styli ...

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

I am trying to organize my content within a navbar into 3 different 'columns'. I want a logo on the left, some navigation items in the center, and the last element ("Get The App") on the right, but I am facing some challenges. Below is my code s ...

IE browser not sending ajax request with jQuery's $.getJSON method (works fine in FF and Chrome)

While using IE9's debug mode, I placed a breakpoint on the first line below and it was hit successfully. However, the breakpoint set on the first line in the callback function is never triggered. Upon checking the Network tab, I noticed that there is ...

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...

Position a div element on top of Google Maps to create a floating

Currently working on a website and attempting to add shadows over Google Maps by using a <div> element for a shadow effect: Unfortunately, the desired effect is not being achieved. This is the current CSS code in use: html { height: 100% } body ...

Use the CSS class

To create tables with 3 rows and 2 columns using divs, I have utilized the ng-repeat directive. Within this setup, there are two CSS classes - red and green, that need to be applied in the following manner: - Red class for the 1st column of the 1st row - ...

Issue with :visited pseudo-class not functioning as intended

My code includes all four basic pseudo-classes, and they all seem to be working fine except for the :visited pseudo-class. The color property doesn't function properly, and the background property appears to be inactive. I'm not sure what the iss ...

Fill the image with width using Mat

While working on creating cards using Angular Materials, I encountered an issue where the image was not filling up the space as desired. The red area in the image indicates where I want the image to take up space. https://i.sstatic.net/vcc9U.png HTML: & ...

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

When resizing the window, the width change in JQuery always resets to 0

I've been trying to adjust the width of a div element when the window is resized, but for some reason, the width always ends up being 0 after the resize event. function resizeUploadField() { var uploadInputField = $('.input-append&apo ...

Switch the hover effect to be activated by clicking

Recently, I discovered an incredible plugin created by the talented developer janko. It has been a fantastic addition to my project. The only issue I've encountered is that I do not want the default hover style. Is there a way to transform it into a ...

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

After spending countless hours researching online, I am still unable to find a solution for responsive web design that maintains the aspect ratio of both the window and HTML body. Here are examples of what I'm looking for: original view, stretched le ...

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: https://i.sstatic.net/AWhcW.png I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for ref ...

JQuery: Techniques for accessing the assigned font of an element

Can the assigned font of an element be retrieved using jQuery? For example, if there is this CSS: #element { font-family: blahblah,Arial; } In the above case, the Arial font will be assigned to #element. Is it possible to extract that information using ...

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

Unable to showcase information in the center of an HTML document

Hello, I'm facing an issue with my HTML page that has a left vertical nav-bar. Despite my efforts, I can't seem to display content (text) in the center of the page as shown in the screenshot with the red oval. I've attempted inserting text ...

Can the meta viewport be eliminated using a script?

I currently do not have access to the HTML file on the server side, but I can make changes by adding additional HTML to the website. My issue is with a non-responsive site listed below, which now requires me to zoom in after it loads due to the new viewpor ...

Applying Transparency to a Button using CSS

I need to modify the style of a button in an HTML document by adding opacity to it. To achieve this, I plan to utilize CSS. Below is the current CSS code for the button: .btn_nav{ position:fixed; width:100%; height:68px; background-color:#323232; border ...