Exploring the internet using a specific font style and ensuring a

I am facing an issue with the fonts on my website. They work perfectly in all browsers when using http, but as soon as I switch to https, the fonts stop working in IE8 and lower versions. However, they do display correctly in ie9.

When trying to access the .eot file path using Internet Explorer, if it's over http, I get a download option for the file. But when I switch to https, it shows that the file cannot be found.

The server setup includes a self-assigned certificate, running on iis 7.5 with .net 4.0, umbraco 4.7.0 cms, client dependency framework (attempted removing this, but issue persists).

<style type="text/css">    
@font-face {
                font-family: 'GGX88UltraLight';
                src: url('/css/type/ggx88_ul-webfont.eot');
                src: url('/css/type/ggx88_ul-webfont.eot?iefix') format('embedded-opentype'),
                     url('/css/type/ggx88_ul-webfont.woff') format('woff'),
                     url('/css/type/ggx88_ul-webfont.ttf') format('truetype'),
                     url('/css/type/ggx88_ul-webfont.svg#webfontU6kiGgEl') format('svg');
                font-weight: normal;
                font-style: normal;
    }
</style>

Here are some web config values that might provide insight:

<staticContent>
  <!-- Set expire headers to 30 days for static content-->
  <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="30.00:00:00" />
  <!-- use utf-8 encoding for anything served text/plain or text/html -->
  <remove fileExtension=".css" />
  <mimeMap fileExtension=".css" mimeType="text/css; charset=UTF-8" />
  <remove fileExtension=".js" />
  <mimeMap fileExtension=".js" mimeType="text/javascript; charset=UTF-8" />
  <remove fileExtension=".json" />
  <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
  <remove fileExtension=".rss" />
  <mimeMap fileExtension=".rss" mimeType="application/rss+xml; charset=UTF-8" />
  <remove fileExtension=".html" />
  <mimeMap fileExtension=".html" mimeType="text/html; charset=UTF-8" />
  <remove fileExtension=".xml" />
  <mimeMap fileExtension=".xml" mimeType="application/xml; charset=UTF-8" />
  <!-- HTML5 Video mime types-->
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
  <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
  <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
  <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> 
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <mimeMap fileExtension=".crx" mimeType="application/x-chrome-extension" />
  <mimeMap fileExtension=".xpi" mimeType="application/x-xpinstall" />
  <mimeMap fileExtension=".safariextz" mimeType="application/octet-stream" />
</staticContent>
<httpProtocol allowKeepAlive="true">
  <customHeaders>
    <add name="X-UA-Compatible" value="IE=Edge,chrome=1" />
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

Answer №1

I encountered a similar issue while using spring-boot: I managed to resolve it by

- Concealing Pragma and Cache-Control response headers from the browser:

Spring-boot sends out specific Cache-Control and Pragma HTTP headers.

Cache-Control :"no-cache, no-store, max-age=0, must-revalidate"
Pragma :"no-cache"

Internet Explorer (IE11 in my case) struggles to load fonts with these headers. It seems like a bug that we have to deal with.

By setting up nginx to act as a proxy for our spring-boot application, I was able to overcome the issue by hiding those headers from the browser using the following nginx configuration snippets:

server {
        listen 443;
        server_name server.dns.name;
        ssl on;
        ssl_certificate /etc/nginx/ssl/server.dns.name.pem;
        ssl_certificate_key /etc/nginx/ssl/server.dns.name.key;

        location / {
            include  /etc/nginx/mime.types;
            rewrite ^/(.*) /$1 break;
            proxy_pass  http://127.0.0.1:8080;
            proxy_read_timeout 90;

            #IE-specific tweak to prevent fonts from being ignored:
            proxy_hide_header Cache-Control;
            proxy_hide_header Pragma; 
            #END IE-specific tweak to prevent fonts from being ignored
        }
}

Answer №2

Have you considered switching the order of the URL sources, maybe placing the "svg" URL second right after the "embedded-opentype" URL?

@font-face {
    font-family: 'GGX88UltraLight';
    src: url('/css/type/ggx88_ul-webfont.eot');
    src: url('/css/type/ggx88_ul-webfont.eot?iefix') format('embedded-opentype'),
         url('/css/type/ggx88_ul-webfont.svg#webfontU6kiGgEl') format('svg'),
         url('/css/type/ggx88_ul-webfont.woff') format('woff'),
         url('/css/type/ggx88_ul-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer №3

Secure websites rely on SSL certificates to establish trust with users. However, it's important to verify and trust these certificates for security purposes. To learn more about how to manually trust an SSL certificate, please check out this link:

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 issue of Google fonts failing to load on Windows browsers while loading perfectly on Mac browsers has been observed

Stackers. I am currently the Front End developer for www.PinionLMS.com. Our website is using "Lato," a Google font. The issue we are experiencing is that when you access the site from a Windows (8.1) browser such as Chrome, Firefox, or Internet Explorer ...

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

What is the purpose of the tabindex in the MUI Modal component?

Struggling with integrating a modal into my project - it's refusing to close and taking up the entire screen height. On inspection, I found this troublesome code: [tabindex]: outline: none; height: 100% How can I remove height: 100% from the ...

Utilizing jQuery UI to dynamically alter CSS classes

I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...

Try utilizing querySelectorAll() to target the second item in the list

As I delve into the world of HTML and JS, I came across the document.querySelectorAll() API. It allows me to target document.querySelectorAll('#example-container li:first-child'); to select the first child within a list with the ID 'exampl ...

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The expected outcome is columns, but ...

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

Can a HTML div be created with an animation and a hover-scale effect added to it?

I experimented with using divs as clickable buttons that direct to another page on my website. I added animations to make them rotate into view when the site is loaded. Now, I'm trying to implement a hover effect that will scale the buttons when hover ...

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

Implement a feature in JavaScript that highlights the current menu item

I'm currently developing a website at and have implemented a JavaScript feature to highlight the current menu item with an arrow. The issue I'm facing is that when users scroll through the page using the scrollbar instead of clicking on the men ...

Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance? Appreciate your assistance in advance. <head>     <title>Test</title>     <meta http-equiv="content-type" content="tex ...

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

How come my header is not spanning the full width of the page?

Hey there, I've been struggling with a specific issue on my website and can't seem to find a solution anywhere else. The header on my site is supposed to stretch across the entire width of the screen, but for some reason, there's always a ga ...

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

I am working on creating a portfolio in Django. I have a section in my HTML code that connects to my jobs list in Django using {% for ... %} in order to display images, summaries, and titles of my projects. However, there is an ID within this div that refe ...

Is there a way to adjust the size of the canvas element in HTML without compromising quality or resorting to zooming?

I'm currently working on a basic modeling application for the web. The main component of my app is a canvas element that I'm trying to size correctly. However, when I set the height and width using CSS, it scales the entire canvas and compromises ...

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

Why is the video background not taking up the entire width of the div element?

I've recently integrated the jquery.videoBG plugin into my project to add a video background. Here's the HTML code: <div id="div_demo"> <div class="videoBG"> <video autoplay="" src="media/snow.mp4" style="position: abso ...

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...