-1

In IE11 my fonts do not load correctly. I think it is the way I am calling them.

@import url('https://fonts.googleapis.com/css?family=Roboto');
            @font-face {
                font-family: Bebas;
                src: url("{% static 'publicnfx/fonts/BebasNeue Regular.tff' %}"),
                     url("{% static 'publicnfx/fonts/BebasNeue Regular.otf' %}");
            }

BebasNeue Regular.otf is the font that is not loading. It works on all other browsers such as Firefox, Chrome, Edge but not IE11 and below.

Error:

enter image description here

Update:

I found this solution online, but it did not work for me:

@import url('https://fonts.googleapis.com/css?family=Roboto');
            @font-face {
                font-family: Bebas;
                src: url("{% static 'publicnfx/fonts/BebasNeue Regular.tff' %}");
                src: url("{% static 'publicnfx/fonts/BebasNeue Regular.eot?#iefix' %}") format('eot'),
                     url("{% static 'publicnfx/fonts/BebasNeue Regular.otf' %}"),
                     url("{% static 'publicnfx/fonts/BebasNeue Regular.woff' %}") format('woff'),
                     url("{% static 'publicnfx/fonts/BebasNeue Regular.ttf' %}") format('truetype'),
                     url("{% static 'publicnfx/fonts/BebasNeue Regular.svg' %}") format('svg'),
            }

This is most likely due to the fact I only have .ttf and .otf in my fonts folder.

Max Loyd
  • 408
  • 6
  • 21
  • Possible duplicate of https://stackoverflow.com/questions/29338479/font-face-failed-opentype-embedding-permission-check-permission-must-be-instal – 04FS Feb 27 '19 at 09:59
  • @04FS I have tried everything on there, and nothing works. Looking for more recent solutions potentially. – Max Loyd Feb 27 '19 at 10:00

1 Answers1

1

The problem was caused because I was not using the right font format for Internet Explorer.

Internet Explorer uses the font format .eot at the end of fonts. In my case the font I was using did not have a .eot file format and had to get someone to reformat a .ttf into a .eot for me.

Then I simply added a new url to that font using the new file format:

@import url('https://fonts.googleapis.com/css?family=Roboto');
    @font-face {
        font-family: Bebas;
        src: url("{% static 'publicnfx/fonts/BebasNeue Regular.tff' %}"),
             url("{% static 'publicnfx/fonts/bebas-neue-bold.eot' %}"),
             url("{% static 'publicnfx/fonts/BebasNeue Regular.otf' %}");
    }
Max Loyd
  • 408
  • 6
  • 21