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
}

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

Does the <cite> tag go inside a link in HTML?

Whenever I include a citation in HTML using the <cite> tag, I typically place the link around the citation itself. For example: <a href="http://example.com/"><cite>Example Citation></cite></a> This method makes sense to m ...

What is the best method for implementing numeric input in Vue.js?

I have experience developing web apps using Nuxt.js. I am currently trying to implement validation that excludes negative values and decimal points in all input tags (around 20-30) within the same Vue component. My approach involves injecting validation ru ...

Changing the Color of a Table Cell with jQuery

I have designed a table cell in the following way <tr> <td id = 'even'>row 8, cell 1</td> <td id = 'odd'>row 8, cell 2</td> </tr> The colors and font sizes are defined using the CSS below #even { ...

Deck.gl's StaticMap component from Mapbox fails to resize properly, causing it to overwrite other elements on the screen

I am encountering an issue while trying to integrate a basic deck.gl (mapbox static map) into a react project. Although I can successfully add the map, it ends up taking over the entire page and hides any other content that should be visible above it. Spec ...

the overflow issue with Summernote's dropdown menu

I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

Disappearing Cloned Form Fields in jQuery

Hey there! I'm trying to duplicate a section of a form using the code below. But for some reason, the copied fields are only visible for a split-second before they disappear. Can anyone spot any errors that might be causing this strange behavior? jQu ...

Tips for concealing non-selected categories in the product tree when a single category is chosen

When navigating through the shopping cart, users will encounter a product category tree structured as follows: Category1 Subcategory11 Subcategory12 ... Category2 Subcategory21 Subcategory22 ... Category3 Subcategory31 Subcategory32 ... ...

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

While developing my website, I faced a challenge with the structure. The home page was built using traditional HTML/CSS, while the other pages were created in Vue.js. Is there a method to connect these two different types of files? For instance, can I inc ...

Looking for a way to transfer the value of a variable to a PHP variable using any script or code in PHP prior to submitting a form?

Within this form, the script dynamically updates the module dropdown list based on the selected project from the dropdown box. The value of the module list is captured in a text field with id='mm', and an alert box displays the value after each s ...

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

Gensim's Word2Vec is throwing an error: ValueError - Section header required before line #0

Hello everyone! I am diving into the world of Gensim Word2Vec and could use some guidance. My current task involves using Word2Vec to create word vectors for raw HTML files. To kick things off, I convert these HTML files into text files. Question Number O ...

If the span id includes PHP data that contains a certain phrase

Hey there, it's my first time posting and I'm in a bit of a bind with this script... Let me give you some background information first I am trying to create a click function for a register button that will check the span id (e.g. $("#username_r ...

Guide to creating a CSS horizontal line with square elements on either side of a title

I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design. https ...

Ensure that only the admin is able to make something vanish for everyone else

Is there a way to hide content for everyone except the admin? Currently, I have this code implemented but it only works when a user is not logged in. When another user logs in, the content is still visible. <?php if( isset($_SESSION['username&a ...

Tips for resolving HTML issues in AJAX Client Side-templates from WCF-webservice

I am facing an issue with my templates where the returned HTML is encoded by default, and despite my efforts, I can't seem to find a solution. My goal is to substitute NewLines (\u000a) with a simple <br />, but every attempt results in &a ...

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

What is the best way to arrange the second div in the second row, while the first and third div are displayed on the first row within the MUI appbar

I have 3 components in the appbar, 1. Logo 2. Search Input 3. Login Buttons When viewing on desktop, all three components will be in a single row as shown below https://i.stack.imgur.com/FYMEH.png Below is my code snippet: export default function NavBar ...