Issue with Font-Face rendering in Internet Explorer or Microsoft Edge

In my current project, I have implemented a font-face rule which looks like this:

@font-face {
    font-family: aiCustomFont;
    src: url('../fonts/myriadpro-regular.otf') format('opentype'),
        url('../fonts/myriad pro regular.ttf') format('truetype');
}

Surprisingly, this rule works perfectly on Safari, Chrome, and Firefox. However, it fails to work on IE11 and Edge. Despite checking the console for errors, no issues are being logged. While searching online, most articles related to font problems in IE seem outdated.

Could it be that aside from TTF/OTF formats, additional font formats are needed to ensure compatibility with IE11/Edge?

htmlcssinternet-explorerfont-face

Answer №1

If you happen to come across this post, I ultimately opted for a web-friendly font.

Ensure that your @font-face declarations are not enclosed within media queries. @font-face declarations within media queries fail to function in IE and Edge, although they do work in all other contemporary browsers that I have tested.

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

Can PHP be used to dynamically load a different stylesheet on a webpage?

Currently in the process of developing a mobile version of my website, I have determined that implementing an alternate stylesheet would be the most effective method to ensure compatibility with mobile devices. I am considering using a PHP script for use ...

phpcssmobilestylesheetalternate

Manipulate the SQL Table output in PHP before displaying it

I am facing a beginner's problem. I have the following code to access a SQL Table, and before printing it out (which works), I want to check if the "Zustand" in the table is 0 or 1. The function should then change the printout to show "good" for 1 and ...

phpmysqlsqlhtml

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Exploring Angular development is a new venture for me, and I could use some guidance on how to achieve a variable CSS height in Angular CLI V12. Let me simplify my query by presenting it as follows: I have three boxes displayed below. Visual representatio ...

javascripthtmlcssangulartypescript

Issue encountered: The CSS provided is not valid as it is expecting a selector or at-rule after "body", but instead found "{". This error is located on line 4 of the code

As I was working on my code in style.scss, I encountered an error message from my Sass compiler (Koala) while trying to include the following code: body {margin-top:105px;} Here's the specific error snippet from style.scss: Error: Invalid CSS after ...

htmlcsssassbootstrap-4

What steps can I take to prevent an HTML box from appearing too close to one side of the screen?

My current goal is to achieve this layout (without the red arrows, of course): https://i.sstatic.net/Mm1rB.png However, I have encountered a CSS issue that I can't seem to figure out on my own. When I view my page, it appears like this: https://i.s ...

htmlcss

What is the purpose of the assertEquals() method in JSUnit?

Currently, I am exploring unit test exercises with a HTML5/JS game that I created and JSUnit test runner. The simplicity of the setup impresses me, but I have noticed that even the documentation lacks a clear explanation of what assertEquals() truly does. ...

javascripthtmlunit-testingassertionsjsunit

Troubles with NextJS and TailwindCSS Styling

I encountered a strange issue when I used the component separately. Here's how the code looked like: <> <Head> <title>Staycation | Home</title> <meta name="viewport" content="initial- ...

javascriptcssreactjsnext.jstailwind-css

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

Enhance Your Website with HTML and JavaScript

Here is the code snippet I am working with: sTAT **javascript** var acc = document.getElementsByClassName("item-wrapper"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ this.classList.toggle("selected"); this.nextElementS ...

javascriptjqueryhtmlcss

Changing the event when a class is active in Vue3

Question I am looking for a way to trigger an event when the 'active' class is added to an element. How can I achieve this? I believe this could potentially be accomplished using a watcher method, but I am unsure how to watch for the applicatio ...

javascripthtmlvue.jsvuejs3

Tips for optimizing IE performance without P3P restrictions

While testing my website, a strange issue arose with IE8. It turns out my friend encountered the problem, as I didn't see any issues when browsing the site from IE8. Upon investigating, I discovered that each time he reloaded the page, the php session ...

internet-explorercookiesphpp3p

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...

javascripthtmlcssweb

Troubleshooting issues with custom Bootstrap CSS implementation

I've been working on a website using Twitter Bootstrap and I wanted to add an interesting dynamic where an image starts off as grayscale and then transitions to full color when hovered over. Instead of modifying the Bootstrap.css, I decided to create ...

csstwitter-bootstrap

Issues arise when dealing with a CSS and HTML accordion

I decided to create a CSS and HTML collapsing menu system, also known as an accordion. I found a tutorial on how to do it here. However, I had to make some modifications because I wanted to include images in the 'sections' later on. Instead of us ...

htmlcssaccordion

Transmitting video through a local area network

I am seeking a solution to stream video content to a local network with potentially over 1000 viewers. The streaming will need to be accessible via web browsers such as Internet Explorer, Chrome, and Firefox, as not all users have internet access due to co ...

javascripthtmlvideostreamingjwplayer

A Step-By-Step Guide on Displaying Two Forms with Two Buttons in HTML

My goal is to develop a functionality on a webpage where users can create keys in a database. The user will need to select between two buttons, each button representing a different form to be displayed. The challenge I am facing is being able to utilize o ...

javascripthtmlformsbuttonbootstrap-4

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

Display an image file using the <img src=""> tag in PHP

I am facing a small issue and could use some assistance. My goal is to display the ROW image associated with each unique ID in my database. Below is an excerpt from my PHP code: while ($row = $result->fetch_assoc()) { // Display the image ...

phphtml

Utilizing an Ajax request to access an API and fetch JSON information. What is the best way to handle the returned

In the process of developing a Chrome application that utilizes my REST API to fetch basic user details in JSON format, I have successfully tested the connection and retrieval functionality within the Chrome developer tab preview. My query pertains to dyn ...

javascripthtmljsonajax

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

I encountered an error when trying to connect my project to a live database. The error message stated: the name ‘textbox’ does not exist in the current context. How can I resolve this issue? Below is the aspx.cs code that I used for the connection, wh ...

htmlcsswebforms