Try our conversational search powered by Generative AI!

DXC Font Issue Impacting IE11 and WOFF

Vote:
 

We are running a website in EpiServer CMS which uses a bespoke font, created as .WOFF.  When the site is published to the DXC environment there is an issue rendering the bespoke font, and the issue only manifests when using Internet Explorer 11.   This results in the fallback standard font being used across the site, impacting the corporate branding. 

When the site is run under localhost, on a development machine, the font renders correctly when viewed via Internet Explorer 11 and also when DXC version of the site is accessed via any other major browser, including Edge, the fonts are loaded without issue.

Anybody come across this issue before, who may be able to advise how to overcome the issue?

#188981
Mar 08, 2018 9:12
Vote:
 

Maybe it's missing mime types? Try adding these to //system.webServer/staticContent section in Web.config:

      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
      <remove fileExtension=".ttc" />
      <mimeMap fileExtension=".ttc" mimeType="application/x-font-ttf" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />

Our standard <staticContent> section looks like this in our projects:

<staticContent>
    <!-- Set expire headers to 365 days for static content-->
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" setEtag="false" />
    <!-- use utf-8 encoding for anything served text/plain or text/html -->
    <remove fileExtension=".css" />
    <mimeMap fileExtension=".css" mimeType="text/css" />
    <remove fileExtension=".js" />
    <mimeMap fileExtension=".js" mimeType="text/javascript" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <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 Audio/Video mime types-->
    <remove fileExtension=".mp3" />
    <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
    <remove fileExtension=".mp4" />
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <remove fileExtension=".ogg" />
    <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
    <remove fileExtension=".ogv" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <remove fileExtension=".webm" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
    <!-- Proper svg serving. Required for svg webfonts on iPad -->
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <remove fileExtension=".svgz" />
    <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
    <!-- HTML4 Web font mime types -->
    <!-- Remove default IIS mime type for .eot which is application/octet-stream -->
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <remove fileExtension=".ttf" />
    <mimeMap fileExtension=".ttf" mimeType="application/x-font-ttf" />
    <remove fileExtension=".ttc" />
    <mimeMap fileExtension=".ttc" mimeType="application/x-font-ttf" />
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="font/opentype" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
    <remove fileExtension=".crx" />
    <mimeMap fileExtension=".crx" mimeType="application/x-chrome-extension" />
    <remove fileExtension=".xpi" />
    <mimeMap fileExtension=".xpi" mimeType="application/x-xpinstall" />
    <remove fileExtension=".safariextz" />
    <mimeMap fileExtension=".safariextz" mimeType="application/octet-stream" />
    <!-- Flash Video mime types-->
    <remove fileExtension=".flv" />
    <mimeMap fileExtension=".flv" mimeType="video/x-flv" />
    <remove fileExtension=".f4v" />
    <mimeMap fileExtension=".f4v" mimeType="video/mp4" />
    <!-- Assorted types -->
    <remove fileExtension=".ico" />
    <mimeMap fileExtension=".ico" mimeType="image/x-icon" />
    <remove fileExtension=".webp" />
    <mimeMap fileExtension=".webp" mimeType="image/webp" />
    <remove fileExtension=".htc" />
    <mimeMap fileExtension=".htc" mimeType="text/x-component" />
    <remove fileExtension=".vcf" />
    <mimeMap fileExtension=".vcf" mimeType="text/x-vcard" />
    <remove fileExtension=".torrent" />
    <mimeMap fileExtension=".torrent" mimeType="application/x-bittorrent" />
</staticContent>
#188990
Mar 08, 2018 11:15
Vote:
 

If that doesn't work, I would try to add a .EOT version as well. Do you have the font installed on your development machine? That might explain why it's working on localhost and not in DXC. Maybe the installed font is used when the .WOFF can't be loaded on your machine?

#188992
Mar 08, 2018 11:26
Vote:
 

We had the mime types mapped in the web.config so this is  not the issue.

I am waiting for the team to provide a .EOT file for the font to test this option.

#189040
Mar 09, 2018 9:30
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.