IE11 experiencing issues with font loading

I need help troubleshooting why the fonts are not loading properly in the body section of my articles, specifically when viewed in Internet Explorer.

Take a look at an example article here:

I am fetching from this CSS file: , and I have included the necessary .eot calls with all files accessible.

Here are some possible reasons:

The use of ":root" is not compatible with IE11

Font variables may not be supported in IE11

@font-face{
    font-family:'Adobe Garamond Pro Bold';
    src:url(../fonts/AGaramondPro-Bold.eot);
    src:url(../fonts/AGaramondPro-Bold.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Bold.woff) format('woff'),url(../fonts/AGaramondPro-Bold.ttf) format('truetype'),url(../fonts/AGaramondPro-Bold.svg#3ba63f82a1b13c399d199d455e95ce26) format('svg');
    font-style:normal;
    font-weight:700
}
@font-face{
    font-family:'Adobe Garamond Pro Bold';
    src:url(../fonts/AGaramondPro-BoldItalic.eot);
    src:url(../fonts/AGaramondPro-BoldItalic.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-BoldItalic.woff) format('woff'),url(../fonts/AGaramondPro-BoldItalic.ttf) format('truetype'),url(../fonts/AGaramondPro-BoldItalic.svg#fc87d529a9b2a903681f36cd7c9d9a39) format('svg');
    font-style:italic;
    font-weight:700
}
@font-face{
    font-family:'Adobe Garamond Pro';
    src:url(../fonts/AGaramondPro-Italic.eot);
    src:url(../fonts/AGaramondPro-Italic.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Italic.woff) format('woff'),url(../fonts/AGaramondPro-Italic.ttf) format('truetype'),url(../fonts/AGaramondPro-Italic.svg#e62a4d531f55b2f8bdfd398331ec8604) format('svg');
    font-style:italic;
    font-weight:400
}
@font-face{
    font-family:'Adobe Garamond Pro';
    src:url(../fonts/AGaramondPro-Regular.eot);
    src:url(../fonts/AGaramondPro-Regular.eot?#iefix) format('embedded-opentype'),url(../fonts/AGaramondPro-Regular.woff) format('woff'),url(../fonts/AGaramondPro-Regular.ttf) format('truetype'),url(../fonts/AGaramondPro-Regular.svg#1eabc8b27c1d378ed9b1f5dd58b5095c) format('svg');
    font-style:normal;
    font-weight:400
}
:root{
    --base-font-weight:400;
    --base-font-size:22px/1.62;
    --sys-font-family:"Adobe Garamond Pro","Georgia","Times New Roman",Times,serif;
    --zh-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Droid Sans","Helvetica Neue","PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    --sub-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Droid Sans","Helvetica Neue","PingFang SC","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    --base-font-family:var(--sys-font-family),var(--zh-font-family);
    --code-font-family:Menlo,Monaco,Consolas,"Courier New";
    --base-color:#444443;
    --emphasis-color:#222223;
    --link-color:#0985ce;
    --link-hover-color:#0985ce;
    --figure-color:#666665;
    --blockquote-color:#666664;
    --code-color:#808080;
    --pre-code-color:#4c4c4c
}
htmlcssfontscross-browserinternet-explorer-11

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

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

I am currently working on developing an HTML/JS turn-based game, where I have implemented a canvas element using JavaScript. The canvas has a repeated background image to resemble a 10x10 squared board. However, I want to overlay a grid on top of it so tha ...

javascripthtmlcss

Issue with JQuery delay functionality not activating correctly upon clicking an <a> tag

When I click on an <a> tag, I want to display a div and wait for 10 seconds before redirecting. However, the div is currently being shown immediately without waiting. Here is the HTML code: <a class="clickHereToDisplay" href="http://www.google.c ...

javascriptjqueryhtmldelay

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011). The idea is quite straightforward: by using a pre element to mirror the input in the ...

javascripthtmlcssinternet-explorer

By default, the D3 hierarchy will collapse to the first level

I've been working on code to create an indented tree structure. My goal is to initially collapse the tree and show only the first level children or the root node. I tried a few different approaches, but none were successful. The current portion I have ...

javascripthtmlcssd3.jssvg

Incorporate descriptive text to my HTML slider

How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...

htmlcss

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

htmlangularjsindexingangularjs-ng-repeatangularjs-ng-click

What is the recommended sequence for adding AngularJS to the index page?

I am new to AngularJS and currently working on a project where I need to include multiple JavaScript files in my index.html page. After doing some research, I came across a post on Stack Overflow that mentioned the importance of including the angular.js fi ...

javascriptjqueryhtmlangularjsweb-applications

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

javascripthtmlcss

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Material UI drop down select position placement

Having an issue with the dropdown position when using select from material UI. It's not appearing in the correct location. Desired Dropdown Position: Current Dropdown Position: when opening the dropdown The dropdown is displaying in the center of ...

cssreactjsdrop-down-menumaterial-uijsx

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

javascriptjquerycsstabs

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

javascriptcssnginxwebserverstatic-files

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

Dynamic change in the mutation observer is not causing the callback to trigger

I have created a nested structure with two <div> elements. I am monitoring changes in the width of the inner <div>, which is set to width:auto;. Despite adjusting the width of the parent <div>, the mutation observer callback doesn't ...

javascriptjquerycssmutation-observers

I'm having trouble getting my button to float correctly on the right side

Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side. I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text. U ...

htmlcss

How to disable the Rubber/Elastic scrolling feature on your iPad?

On my webpage, there is a combination of vertical and horizontal scrolling. Everything works fine when the user swipes left or right exactly, but issues arise when the swipe is not precise along a straight line (diagonally). In this case, both vertical and ...

jqueryhtmliosipadmobile

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation

Prevent jQuery UI dialog from adjusting its position relative to the browser when scrolling

When I launch a jQuery UI dialog, the position of the dialog changes when I scroll the browser. How can I make it remain in the same position relative to the browser window? ...

jqueryhtmlcssjquery-uijquery-ui-dialog

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

The layout is being disrupted by a bug in the nested list div in IE 7

I am currently in the process of creating a website with nested lists in the sidebar. The parent list contains children li elements. Initially, only 4 list items are displayed, and the rest should be hidden with an option to "Show All" above them. Here is ...

htmlcssinternet-explorer-7