Why @font-face doesn't display on older versions of Internet Explorer like IE 7 and IE

Our website has the following CSS code. The use of a smiley face is to ensure compatibility with IE 7 and IE 8. However, while the site's fonts display correctly on IE 9, Chrome, Firefox, etc., there seems to be an issue with IE 7 and 8.

@font-face {
        font-family: 'BrauerNeue-Bold';
        src: url('fonts/brauerneue-bold-webfont.eot');
        src: local('☺'), 
              url('fonts/brauerneue-bold-webfont.woff') format('woff'), 
              url('fonts/brauerneue-bold-webfont.ttf') format('truetype'),
              url('fonts/brauerneue-bold-webfont.svg#webfontvlyLbaAW') format('svg');
        font-weight: normal;
        font-style: normal;
    }

I have also confirmed the following:

  1. The .eot, .woff, and .ttf font files are stored in the Fonts folder.

  2. These files can be downloaded directly via URL.

  3. The fonts initially load properly on IE 7 and 8, but upon CTRL + F5 or browser refresh, they fail to render.

  4. Ensured that the .eot file is added to IIS 7.0 mime type.

  5. Is there a difference between HTTP and HTTPS?

  6. Are there any specific IIS configurations needed?

If anyone could provide assistance on how to make the above fonts work properly on IE 7 and 8, it would be greatly appreciated.

Thank you.

cssfonts

Answer â„–1

To utilize this, follow these steps - 

@font-face {
    font-family: 'CustomFont';
    src: url('customfont-webfont.eot?#fixie') format('embedded-opentype'), 
         url('customfont-webfont.woff') format('woff'), 
         url('customfont-webfont.ttf')  format('truetype'),
         url('customfont-webfont.svg#svgFont') format('svg');
    }

Explore further details here

Answer â„–2

You have repeated the src property twice. The second one overrides the first.

In IE7 and IE8, support for font-face does not include

This means you need to use an embedded-opentype font.

However, by removing the only available value, you are unable to use it...

You can try this instead:

@font-face {
    font-family: 'BrauerNeue-Bold';
    src: local('☺'), 
          url('fonts/brauerneue-bold-webfont.eot'),
          url('fonts/brauerneue-bold-webfont.woff') format('woff'), 
          url('fonts/brauerneue-bold-webfont.ttf') format('truetype'),
          url('fonts/brauerneue-bold-webfont.svg#webfontvlyLbaAW') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

javascriptjqueryhtmlcss

Guide on implementing validation for currency on input field with regular expression

Review the form below: <form> <input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/> <input type="te ...

htmljquerycssformsvalidation

Navigating Divs Using jQuery

I am working with a class that has multiple divs, each with a unique id attached to it. I am using jQuery to dynamically cycle through these divs. This is a snippet of my HTML code: <div id ="result">RESULT GOES HERE</div> ...

javascriptjqueryhtmlcss

Eliminate certain inline styles using jQuery

I am facing an issue with an asp menu I am using. It is automatically inserting style="width:3px;" into my menu table tds, creating an unsightly gap between my tabs. Instead of asking our developer to customize the menu just to fix this cosmetic flaw, I am ...

jquerycssinline-styles

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

javascripthtmlcss

Customizing text appearance with innerHTML in JavaScript: A guide to styling

Below is the code I have for a header: <div id="title-text"> The Cuttlefisher Paradise </div> <div id="choices"> <ul> <li id="home"><a href="#">Home</a></li> <li id="contact">&l ...

javascripthtmlcss

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss

When converting the .html file to a .php file, the CSS file fails to be linked correctly

The issue I'm facing seems to be specific to the index.html file. The CSS that functions properly with an html extension suddenly stops working when the extension is changed to php. Upon inspecting the reference link in both cases, I noticed that when ...

phphtmlcsszurb-foundation

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

htmlcssbootstrap-4

Converting text to icons and adding tooltips using only CSS

I am faced with the challenge of transforming a hyperlink into an icon while converting the text content into a tooltip using only CSS and without the ability to modify the HTML or add JavaScript. Data is being extracted from an external source in the form ...

htmlcss

Shade the tag when the checkbox is marked

Is it possible to change the color of a label without using javascript when the associated checkbox is checked? ...

htmlcss

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...

javascriptjavajquerycss

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

Tips for altering the appearance of the material-ui slider thumb design when it is in a disabled state

Through the use of withStyles, I have successfully customized the style of the Slider: const CustomSlider = withStyles(theme => ({ disabled: { color: theme.palette.primary.main }, thumb: { height: 24, width: 24, }, }))(Slider); How ...

javascripthtmlcssreactjsmaterial-ui

Customize the background color of FullCalendar in a React application

I'm currently using FullCalendar in my react app to showcase a calendar with events displayed. Right now, I have a day grid set up and I'm interested in changing the background color of the grid. The background color for today's date is alw ...

htmlcssreactjsfullcalendarfullcalendar-5

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Limit the maximum column gap on the grid and stop it from expanding further

I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...

htmlcsscss-grid