IE doesn't render the font

@font-face {
  font-family: 'Museo-Sans';
  src:  url('../fonts/MuseoSans/MuseoSans-900.otf') format('opentype'),
        url('../fonts/MuseoSans/MuseoSans-900.eot'),
        url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype');
  font-weight: 900;
  font-style: normal;
}

Internet explorer is not displaying the font. I tried converting the otf file to eot, but manually adding the third line did not work. Any tips on how to correctly convert the files so that they include ?#iefix?

cssinternet-explorerfont-facewebfonts

Answer №1

Consider using the .woff file format to ensure compatibility with Internet Explorer 11

@font-face {
    font-family: 'Museo-Sans';
    src: url('../fonts/MuseoSans/MuseoSans-900.eot'); /* Compatible with IE9 */
    src: url('../fonts/MuseoSans/MuseoSans-900.eot?#iefix') format('embedded-opentype'), /* Works on IE6-IE8 */
         url('../fonts/MuseoSans/MuseoSans-900.woff') format('woff'), /* Supports IE 9-11 & Modern Browsers */
         url('../fonts/MuseoSans/MuseoSans-900.ttf')  format('truetype'), /* Works on Safari, Android, iOS */
         url('../fonts/MuseoSans/MuseoSans-900.svg#svgFontName') format('svg'); /* Legacy support for iOS */
    }

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

The columns in CSS grid-template are refusing to change despite the media query code being applied and active

Currently, I am facing an issue while working on a site plugin and trying to utilize CSS grid to showcase posts. Despite the media query being active according to the inspector, the modification in the template columns is not reflecting as expected. Check ...

htmlcsswordpresswordpress-plugin-creation

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

javascriptcssangular

What are the steps to ensure my header spans the full width on both mobile and desktop platforms in an HTML email?

Hello, I am nearly finished with composing this email, but an issue has arisen on mobile where the header is not stretching to full width. My goal is to make the header image fill the entire width of the screen on a mobile device, but I keep encountering o ...

htmlcssmobileheaderwidth

Dynamic color change in SVG

I am facing an issue with changing the color of svg images in a menu list using the filter CSS property. Even though I have obtained the correct filter value from a library that converts hex to CSS filter, React seems unable to set this property on the ima ...

cssreactjscss-filters

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

htmlcsstwitter-bootstrap-3

jQuery Mobile for Enhanced Customer Relationship Management on the Web

I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...

jqueryhtmlcssjquery-mobilecrm

Images fail to load on a NodeJS server running on localhost

Whenever I attempt to set up a NodeJs server and run it with an HTML file, the images are not loading properly. Here is the NodeJS code snippet: var http = require('http'); var fs = require('fs'); fs.readFile('main.html', fu ...

javascripthtmlcssnode.js

swap out the main picture for a new one once the thumbnail is selected (gallery feature)

Hey everyone! I recently decided to create a personal portfolio website to showcase my new passion for photography. Everything is set up at the moment and you can check it out here. However, I've been struggling to get the image replacement to work ...

jqueryhtmlcss

Unable to set height:auto for the background image

For more information, visit this link. I am looking to customize the comments area by giving it a solid color that dynamically adjusts its height based on the number of comments. The background color should expand if there are many comments and shrink if ...

htmlwordpresscss

Is there a way to apply multiple colors to a h1 tag in HTML?

I need help with adding multicolor to a heading on my website using CSS. I am trying to define colors using the span element with different classes for each text section. However, the colors are not showing up as expected and there seems to be spacing issu ...

htmlcss

How come my ejs files are all affected by the same stylesheet?

Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...

htmlcssnode.jsexpressejs

What is the most efficient way to incorporate or import CSS from a CDN into a Create React App without needing to eject?

After reviewing this answer, I can't help but wonder if there's a more efficient method for importing a CSS file into a React component, similar to how JS files are imported. Perhaps something akin to SCSS's @import url('cdn-url.css&ap ...

cssreactjsimportsass

Create a dynamic webpage where two div elements glide in opposite directions

My apologies for this seemingly basic question, but I am wondering if anyone knows how to create an animation where a div moves up and down while scrolling, similar to the effect on this website: On that site, near the footer, there are 2 sections with 2 ...

jqueryhtmlcss

Show a substantial amount of text when the cursor hovers over

I have incorporated a pop-up tooltip from the following link: This feature enables a message to appear whenever I mouse-over a [?] sign. The script is structured as follows: <a href="#" class="hintanchor" onMouseover="showhint('Please choose a u ...

asp.nethtmlcsstooltipmouseover

Clicking on the overlay does not close the bootstrap collapsed toggle

I'm currently facing an issue where I need to add a listener that closes the menu when clicked away. The code snippet below shows my attempt at solving this problem: $("body").click(function(e){ var $box1 = $('.navbar-toggle'); var $b ...

jquerycsstwitter-bootstrap

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

In this project, I am using vue.js along with muse.ui and only incorporating JavaScript and CSS without the jQuery library. Currently, the footer position always ends up on top of the keyboard whenever an input field is focused. Is there a way to ensure th ...

javascripthtmlcssvue.js

I have organized two <h4>, <img>, and <p> tags into individual <div> elements. To prevent overlap, I floated the image and used <br> tags to create separation between the <div> elements. However, they still overlap despite these efforts

Arranging two h4, img, and p tags within separate <div> elements, I attempted to use float for the image and tag for separation. However, they are still overlapping. https://i.sstatic.net/SUxli.png Here is the image displaying the issue. I' ...

htmlcss

"Upon the page loading, a flickering effect can be seen in the div that

I'm trying to avoid this issue. Whenever I use ng-repeat, it initially displays everything inside the div along with empty scopes for a brief moment before loading the data and showing it normally. I want to eliminate this flicker upon page load but c ...

javascriptjqueryhtmlcssangularjs

Center both vertically and horizontally in Bootstrap UI Modal

I'm attempting to create a Bootstrap UI Modal that is centered both vertically and horizontally. While I found this solution that successfully centers the modal vertically, it loses its horizontal centering when applied to my own template with 800px ...

javascriptcssangularjstwitter-bootstrapangular-ui-bootstrap

Guide to aligning an image in the center of varying heights and widths with the use of HTML and CSS

I am trying to achieve a layout where all the images are centered, with five images in the first row and the rest in the second row, also centered. Below is the code I have attempted: <section id="Section"> <h1 class="sectionTit ...

htmlcssbootstrap-4