Internet Explorer reverts back to default fonts once the webpage has completed loading

I'm encountering a minor problem with a website I'm currently working on. My CSS and web fonts are from Fonts.com, and everything seems fine except in Internet Explorer. Initially, the page displays with the fonts correctly applied, but once the loading is complete, IE reverts back to the default font.

Here's an example of the CSS:

@font-face{
    font-family:"HelveticaNeueW02-55Roma";
    src:url("/d/0b3a3fca-0fad-402b-bd38-fdcbad1ef776.eot?d44f19a684109620e484167aa390e81872e11b421ef14b20f5dda8683b7716e34431bd7031a61bffb8b38558710357d5ed49d8a7dcd4f490bf2bc9922040a50d670eaafb6e334fcf61c48a10483015d48bd9b9cb074a09c71c211940cb0c60886a2d42510bad7eced9195baae7bedb11ccbdb0d618032faccca0c925a83db7aac01d0bae4b090b6680179034630a36491101451...

and typical use cases:

body {
    font-family: "DIN Next W02 Cond";
    font-weight: normal;
    font-size: 14px;
    font-weight: normal;
}

p {
    font-family: "HelveticaNeueW02-55Roma";
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
}

The wider font appears after the page fully loads, while the narrower font (the correct one) shows during loading.

Is there a simple solution? Fonts.com offers a web portal for specifying fonts in the CSS served from their servers, so editing that directly isn't straightforward. However, I can modify the font-family property for elements using the web fonts. Any additional details needed, I'll provide where possible.

Edit: this issue is not related to flash of unstyled content; it initially renders properly, then switches to the default font upon completion of page loading. This unexpected behavior has led me to seek help here for a resolution.

cssinternet-explorerwebfonts

Answer №1

The flashing you are experiencing is likely due to a font loading issue, especially if you are using IE9. The browser may display text in a default font while waiting for the web font to load.

@font-face { font-family: 'OpenSansLight'; src: url('OpenSans-Light-webfont.eot'); src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Light-webfont.woff') format('woff'), url('OpenSans-Light-webfont.ttf') format('truetype'), url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); font-weight: normal; font-style: normal;

}

This method ensures cross-browser compatibility when using @font-face. If you need these font files created, visit fontsquirrel.com

Font loader tools like Typekit and Google Fonts can help prevent this flashing effect. You may need to adjust it for your specific code, but you can find it on Github here

Answer №2

For me, the problem seems to be localized.

After we pushed it to our staging server, the fonts showed up correctly in IE 7 and 8.

I'm still unsure why they're not appearing locally, but at least everything is working fine in the production environment.

Answer №3

While my fonts seem to display properly in IE8 when viewed locally, they fail to load in the production environment. I am using fontawesome for bootstrap twitter.

An interesting observation is that if I select the entire page after it has loaded, all the fonts suddenly appear. This suggests that the fonts are indeed there, but IE8 disregards them once the page has finished loading. Despite checking quirks mode and other combinations, the issue persists.

This seems to be a timing issue related to the speed of load in relation to other CSS on the page. Adjusting the position of the CSS link within the code does have some effects, but no clear solution has been found.

I wish there was a way to refresh or re-instate the loaded fonts once the page has fully loaded. It would certainly make things easier!

Answer №4

During our project, we discovered that web fonts would often revert back after the page loaded in Internet Explorer whenever the developer tools were open. It's a quirky issue that still catches us off guard occasionally, causing this strange behavior to happen locally but not in production.

Although it doesn't happen consistently with every page load, we've noticed it occurring more frequently when manually refreshing pages. Despite searching for documentation on this issue, we have only encountered it while using IE 10 and particularly IE 11 on various computers.

Answer №5

The issue with the flash of styled content that I experienced had two root causes:

  1. My local installation of the font caused a conflict
  2. I mistakenly used an incorrect URL for the web-font

This resulted in Internet Explorer initially displaying the locally installed font before attempting to load the web-font from the wrong URL. When this failed, it defaulted to a standard sans-serif font.

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

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

I am experiencing an issue with the mobile version of a website where the dropdown menu is not fully visible due to the position of a specific menu item and the number of items in the dropdown. The image below shows how I would like it to be displayed, fo ...

htmlcsstwitter-bootstrap-3

Expand the div to fit the rest of the screen following the fixed-size navigation bar

I am looking to create a webpage layout that includes a header, mid section, and footer. In the mid section, I want to have a fixed width navigation bar of 250px, with another div holding the content that stretches to fill the remaining space in the browse ...

htmlcsslayoutcss-positionstretch

The background-size property fails to function properly on mobile devices

It's really puzzling why this issue is happening, perhaps it's due to my fatigue. The problem lies in the fact that the "background-size" property isn't functioning on my mobile devices; however, it works perfectly when I try to simulate it ...

htmlcssmobile

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

htmlcsspositioning

What could be causing my modal to not animate from the center of the screen?

I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...

cssanimationtransformscale

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

cssreactjsstylesmaterial-ui

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

Combining jQuery with tablesorter in Internet Explorer 7 while working with large tables can feel like

My go-to tools are jQuery and the tablesorter plugin, but I've run into a bit of a snag when dealing with large tables (900-1200 rows) in Internet Explorer 7 and 8 - the plugin slows down significantly. I wish I could paginate or recommend switching ...

jqueryinternet-explorerinternet-explorer-8internet-explorer-7

Maintain the text layout when copying and pasting from the Angular Application

After noticing that copying and pasting text from an Angular Application to a text editor like Microsoft Word results in losing the original format, I decided to investigate further. An example I used was the angular material website: https://material.ang ...

cssangular

Containers do not line up properly with each other. Adjusting the width leads to unexpected consequences

As someone who is new to HTML and CSS, I am facing a challenge with aligning the items within a navigation bar on my website. The list serves as a navigation bar and is contained inside the "inner header" div. While I was able to align the entire "nav" con ...

htmlcss

Need assistance with CSS layout: How to extend a div to the bottom of the page

I am currently working on a design layout that includes a 'header' section with a logo and links, as well as a content area that should extend to the bottom of the page. However, I am facing some challenges in achieving this. Initially, I enclos ...

csshtml

When viewing Google maps in full screen mode, the image suddenly vanishes

I have a map with a logo positioned in the lower right corner near the controls. However, when I switch to full screen mode, the logo disappears. I can see the div (aggdata-info) in Firebug, but the image/logo is not visible. Any suggestions on how to fix ...

jqueryhtmlcssgoogle-maps-api-3

Accelerate Image Preloading速

I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...

javascriptjqueryhtmlcss

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is the misalignment due to a floating point error?

Attempted to create a 3-column layout without responsiveness, but encountered an odd alignment issue. http://jsfiddle.net/z5mgqk6s/ #DIV_1 { box-sizing: border-box; color: rgb(255, 255, 255); height: 83.2px; text-align: center; widt ...

htmlcss

Changing the loading spinner icon in WooCommerce

Could someone help me change the loading spinner icon in WooCommerce? The current icon is defined in the woocommerce.css: .woocommerce .blockUI.blockOverlay::before { height: 1em; width: 1em; display: block; position: absolute; top: 50 ...

phpcsswordpresswoocommercespinner

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

cssmedia-querieslandscape-portrait

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below: Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I encountered difficulties and failed ...

csspositionheight

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Currently, I am engaged in a project that was initiated with bootstrap version 4.3.1. I have a keen interest in both JavaScript and HTML coding. <a class="dropdown-item" href="{{ route('user.panel') }}"> User panel </a& ...

javascripthtmlcssbootstrap-4laravel-5.8