22

I am developing a website that uses the Google font Open Sans like so:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,800italic,800,700' rel='stylesheet' type='text/css'>

Normally, I use Chrome when working with my website, but today I decided to see how it looks in IE 11 (11.0.10240.16431) on Windows 10. Unfortunately, Open Sans isn't being loaded and rendered properly. I see lots of these errors in the Developer Tools console:

CSS3111: @font-face encountered unknown error.
PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff

Thinking that was strange--I had previously developed a site that loaded Google Fonts just fine in IE 10--I headed on over to https://www.google.com/fonts. More CSS3111 errors, with every custom font being displayed in serif instead:

Google Fonts broken in IE 11

Google Fonts broken in IE 11

Is Google Fonts simply broken for IE 11? The fonts do load correctly in Edge, Chrome, Firefox, etc. I am at a loss for how to proceed to get these fonts to work in IE.

UPDATE 1

Setting the emulated document mode to 8 in IE 11 causes the fonts to render correctly. IE 9+ still exhibited the same issues, however. Is this some kind of incorrect user agent string processing by Google, perhaps?

Correct rendering

UPDATE 2

I went to FontSquirrel and downloaded Open Sans in all its formats. I also imported the CSS provided in the ZIP. Unfortunately, IE and now Firefox continue to report that the font can't be used. Firefox says downloadable font: not usable by platform.

UPDATE 3

I've confirmed that IE's Font download setting is set to Enabled for all security zones.

NathanAldenSr
  • 7,841
  • 4
  • 40
  • 51
  • Being on Linux myself, I can't test this. And this shouldn't really matter. But is there any difference when you use HTTP instead of HTTPS? Because I've previously had problems loading Google Fonts over SSL. – Steyn Oct 08 '15 at 18:40
  • 1
    [http]://google.com/fonts redirects to [https]://google.com/fonts. Even if there was a difference, it's not an option for my website. The website is being served over HTTPS and we don't want "insecure content" warnings to show up in people's browsers. – NathanAldenSr Oct 08 '15 at 19:02
  • One thing I noticed is that the file served by Google only has WOFF URLs in it. I thought IE only supported EOT? – NathanAldenSr Oct 08 '15 at 19:02
  • I am now fairly convinced that this is a regression in Windows 10's version of IE 11. I tested this website on Windows Server 2012 R2's version of IE 11 (11.0.9600.18036) and the fonts load perfectly. – NathanAldenSr Oct 09 '15 at 14:18
  • I reported this to Microsoft using Microsoft Connect and got a response that they couldn't reproduce it. So much for my detailed bug report. They also basically said they don't work on IE anymore. I guess they want to ignore the fact that no one's using Edge. – NathanAldenSr Oct 11 '15 at 13:40
  • Same problem here. After fiddling with everything I am also convinced that it is a regression with IE11 for Windows 10. I will report it to Microsoft -- let's see how this is going further ... – fpbhb Oct 14 '15 at 20:45
  • @NathanAldenSr did you ever try what I wrote in my answer below? I'd be interested wether you met the same phenomenon. – fpbhb Nov 03 '15 at 19:17

5 Answers5

25

For me, this issue was caused by a Windows 10 feature called Untrusted Font Blocking. My office network had this turned on in our group policy settings.

Using this feature, you can turn on a global setting that stops users from loading untrusted fonts that are processed by the Graphics Device Interface (GDI). Untrusted fonts are any fonts that are installed outside the %windir%/Fonts directory. https://support.microsoft.com/en-us/kb/3053676

To disable Untrusted Font Blocking using Group Policy:

  1. Open Group Policy Management Editor
  2. Under Local Computer Policy, expand Computer Configuration, expand Administrative Templates, expand System, and then click Mitigation Options.
  3. In the Untrusted Font Blocking setting select Do not block untrusted fonts

To disable Untrusted Font Blocking using Registry Editor:

  1. Open Registry Editor (regedit.exe) and go to the following registry subkey: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Kernel\
  2. If the MitigationOptions key is not there, right-click and add a new QWORD (64-bit) Value, naming it as MitigationOptions.
  3. To turn this feature off. Type 2000000000000.

IMPORTANT: A computer restart is required for the changes to take effect

Fraser Crosbie
  • 1,672
  • 1
  • 12
  • 21
4

As weird as it sounds, the solution is to turn on the Windows firewall. With the firewall switched off, you cannot even add TTF fonts to the system, and this is the same problem as with @font-face. I've found that solution here: https://superuser.com/questions/957907/unable-to-install-fonts-on-windows-10

Community
  • 1
  • 1
fpbhb
  • 1,469
  • 10
  • 22
  • Unfortunately, I'm not sure that this was the cause of the problem for me. The three Windows Firewall profiles are set to Off, *and* the service itself is Stopped, but now suddenly I can see fonts in IE 11. I checked the version number and it's the same, too. – NathanAldenSr Nov 04 '15 at 21:19
  • 1
    For me FW off reliably was the cause of CSS3111 for web fonts. I noticed that once a font had been seen by the system (while the FW was on) that particular font kept working without CSS3111 when the FW was switched off again. May be worth a try. – fpbhb Nov 06 '15 at 21:12
4

Don't worry about font blocking. Turn your fonts into base64 and include through CSS. This way you push the fonts through the browser code and the font files are not downloaded in the usual fashion. This is also a DISA STIG issue to disable downloadable fonts. The solution can be seen at this post and also copied here:

You just need to Base64 the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

Use https://www.base64encode.org/ to encode the WOFF Font-Awesome font file.

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.

TadLewis
  • 141
  • 9
  • Eventhough there is a downfall of increased css file size, this greatly helps by bypassing the need to download a file :) – Krishna Prashatt Nov 06 '19 at 11:08
  • Isn't there a url encoding limit of 2083 characters in IE? Most font files will breach this limit. – Phil Mar 06 '20 at 10:02
0

I have this exact problem on many Windows 10 / IE 11 machines (ie web fonts do not work and give CSS3111 errors in the debug console). In all cases the firewall was already on (and managed by group policy).

I found that disabling the firewall in the registry HKLM\SYSTEM\CurrentControlSet\Services\SharedAccess\Parameters\FirewallPolicy\DomainProfile\EnableFirewall = 0 followed by a reboot, then setting it back to 1 and rebooting again fixes the problem.

The other thing that always fixes the problem is to unselect "Internet Explorer" in the Windows Features, reboot, then reselect "Internet Explorer" and reboot again.

My guess is that this is some type of internal windows firewall bug and both of the above actions trigger the firewall service to clean up some type of internal corruption.

crikey
  • 11
  • 2
0

In Windows 10 there are three levels for font blocking:

  • IE security settings for downloading fonts (user part)
  • Option "untrusted font blocking" (Computer level)
  • Option" Enable front providers" (Computer level)

You have to enable all, to get it working.

Teo Test
  • 1