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

Tips for using CSS to position a sidebar on the right side of the screen:

I've been working on creating a simple sidebar and have reached this point in my code. However, I'm struggling to get it to float to the right. It's all a bit confusing for me. If you'd like to take a look at the code, here is a link t ...

Chrome distorts background images with CSS when resized

One thing I noticed is that Chrome seems to display CSS background-images differently compared to using the <img /> tag. I tested two identical images resized to the same dimensions The first image set as a CSS background-image appeared pixelated W ...

A neutral-toned backdrop that briefly shows up for a quick 7-second interlude during a background-image

Recently I created a website. On this website, there is a feature where 3 images change every 7 seconds for a total of 3 cycles. The code snippet used for this functionality is as follows: var swap; function run(interval, frames) { var int = 1; ...

The border-color feature in Bootstrap 5 does not function properly when applying responsive border-start/end/top/bottom styles

My Objective: For mobile: I want to have borders only at the top and bottom. For desktop: I want borders only at the start and end, in a border-dark color. My Attempts: I have added custom responsive borders to my main.scss file // responsive borders @ ...

The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML: <div class="utilitiesHeader"> <div id="utilitiesLogo"></div> <div id="utilitiesFIO">Name of user</div> </div> <div class="utilitiesContent"> <d ...

Using a Second List Element in CSS Image Rollover Map with jQuery

I have been utilizing this interactive map from Wolf's website, but I am interested in incorporating a secondary list of countries alongside the existing one as the base for the script. However, due to presentation reasons, the second menu cannot resi ...

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

CSS flexbox completely collapses all child elements that are empty

Is there a way to collapse the empty "col" divs in this html structure while keeping the content divs equally sized (two columns in this case)? * { box-sizing: border-box; } .container { border: 1px dashed rgba(255, 0, 0, .5); background-color: b ...

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

Place a single div above two divs in a flexbox container

I am struggling with aligning the fourth div, which has a class of "details", above the second and third div in a flex box layout. Despite my efforts, I have not been successful in achieving this alignment. Can someone please assist me? .flex-container ...

Implement HTML code within WordPress labels

Seeking assistance with customizing certain menu items in a WordPress website. Wondering if it's feasible to include HTML/CSS in the title label? My current situation is as follows: I only want one result to be highlighted in blue. I attempted to ...

Eliminate embellishments upon hovering over hyperlinks

Is there a method to prevent my links from becoming underlined or changing color when hovered over? ...

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

Issues with the parallax zooming out effect

Delving into the world of parallax effects, I'm on a quest to achieve a captivating zoom-out effect while scrolling. However, I'm encountering an issue where the image shrinks beyond the browser width and the div's height. In the example pr ...

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...

Struggling with how to customize the input component from react-native-elements? Let

I am currently exploring how to customize the appearance of an input using react-native-elements, similar to the design depicted in the documentation... My goal is to achieve the look of the top inputs with a white background, but I am uncertain about th ...

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices. For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I&apo ...

Best practices for evenly distributing images within a navigation bar?

Within a horizontal navbar, I have various small images that are currently spaced out with different intervals between them. Each image has its own unique spacing from the others. I am looking to achieve consistent spacing between each image in this horiz ...