Fonts are not loaded in IE11 with built app

[michaelperrin]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

fonts

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.9.4
Yarn: 1.6.0
npm: 5.6.0
Watchman: Not Found
Xcode: Not Found
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.4.0 => 16.4.0
react-dom: ^16.4.0 => 16.4.0
react-scripts: 1.1.4 => 1.1.4

Steps to Reproduce

1. Create a new project with create-react-app
2. Add a font in the src/font dir
3. Add the necessary CSS to use this font using @font-face in index.css like in this example:

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('./fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'OpenSans-Regular', sans-serif;
}

4. Run yarn start and open http://localhost:3000 in Internet Explorer 11 (using a VM may be a nice idea) and check that your font is used for the text (this is the expected behavior).
5. Stop the process and run yarn build
6. Run the built page by running serve -s build
7. Open http://localhost:3000 with Chrome, Firefox, etc. You will see that the used font is OpenSans
8. Now open the same URL with Internet Explorer 11.

Expected Behavior

IE11 should display the text with the OpenSans font when the project is built.

Actual Behavior

The OpenSans font is not downloaded and the text is shown as sans-serif.

IE 11 (see how the text is rendered):

Chrome:

Reproducible Demo

I created a repository to show the problem here: https://github.com/michaelperrin/create-react-app-font-problem.
Steps to reproduce:

1. Clone my demo repo: git clone https://github.com/michaelperrin/create-react-app-font-problem.git
2. Run the following commands:

 yarn global add serve
 yarn build
 serve -s build

3. Open http://localhost:3000 with Chrome, Firefox, etc. You will see that the used font is OpenSans
4. Now open the same URL with Internet Explorer 11 (using a VM may be a nice idea).

A few notes:

• This is not due to the fact that you are running the project on localhost (I hosted it on a server and got the same problem).
• This is not due to font formats (IE11 does support EOT files).
• This happens with any font.
• This is not due to security parameters of IE11 (font download is enabled).
• I hope I didn't miss something and that this is an actual bug 😉

[stereobooster]

Try this https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#internet-explorer-compatibility-mode
or this https://helpx.adobe.com/typekit/kb/troubleshoot-adding-fonts-website.html#IE-not-showing-fonts
Also some people recommend to remove cache-control header in the server

[raffaeu]

Facing the same exact problem with create-react build and IE 11 using Ant Design. Apparently seems to be a problem with Create React.
Would be nice to know if there is any workaround. cache-control doesn't work for us

[nemanja-stojanovic-mqsoftrs]

Same problem as @raffaeu. Built version of create-react-app doesn't show correct fonts in IE11. I also use Ant Design for styling. Adding meta tags doesn't work for me.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[raffaeu]

Well your team has to start fixing the bug, surely by closing the issue you are not addressing the problem

…

Sent from my Mobile

On Thu, 6 Dec 2018, 11:37 stale[bot] ***@***.*** wrote: This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4585 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPooOPaugslK7URdWSCQ_XFi5945xcUks5u2PNOgaJpZM4UemOW> .

[baitun]

Problem is still actual

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[idtirba]

Can also confirm the bug. Will this be addressed?

[Timer]

This may be related to #4121. Can someone confirm? We could fix it quicker then.

[idtirba]

I can confirm the bug is related to #4121.

[avilde]

I have noticed the same issue on IE11. In development mode the fonts are loaded but when I build the application (npm run build) and then serve the files (either serve -s build or put on production environment like Azure) the fonts are somehow ignored.

I checked the bundled CSS file and this is what is added:

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url(/fonts/open-sans-v15-latin_latin-ext-regular.woff2) format('woff2'),
    url(/fonts/open-sans-v15-latin_latin-ext-regular.woff) format('woff');
}

Not sure what needs to be added here.
Maybe embedded opentype but that is for IE8-9.

[sujeetsharma1980]

I am also facing the same exact problem with IE 11. Is there any workaround? Kind a blocker for my application.