@font-face icon not showing in IE 11, all other browsers supports. Using base64 url

My @font-face is not working in IE 11,in all other browsers anythings shows fine. There is a console error in IE: "@font-face failed opentype embedding permission check. permission must be installable"

I have search some solutions online, but nothing worked for me. I have sean that this is a common issue in IE, but asking if someone knows something

Here is all the code with font in base64. :

css:

.homeicon{
display: inline-block;
float: left;
font-family: iconfont;
margin-top: 3px;
}

@font-face {
    font-family: "iconfont";
    src: url(data:font/truetype;base64,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) format('truetype');

    font-weight: 400;
    font-style: normal;
}

.homeicon{
  content: "\e902";
}

html:

<span class="homeicon"></span>

Solution

I have fix the issue. I have changed the font icon to a woff format. Now the font icon is visible on all browsers, explicit on IE11.

What i have done is, i formated the font icon .ttf file to a base64 format .woff. I have used this encoder [https://www.giftofspeed.com/base64-encoder/].

And the sintax looks like this:

@font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}

Here is the fixed code:

src: url(data:application/font-woff;base64,d09GRgABAAAAAASEAAsAAAAABDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFLGNtYXAAAAFoAAAAVAAAAFQXVNKLZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAHwAAAB8Ggc9uWhlYWQAAAJAAAAANgAAADYVCTmraGhlYQAAAngAAAAkAAAAJAfCA8ZobXR4AAACnAAAABQAAAAUCgAAAGxvY2EAAAKwAAAADAAAAAwAKABSbWF4cAAAArwAAAAgAAAAIAAHABNuYW1lAAAC3AAAAYYAAAGGmUoJ+3Bvc3QAAARkAAAAIAAAACAAAwAAAAMDAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkC//3//wAAAAAAIOkC//3//wAB/+MXAgADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAEAANgABAAAAEnESMVJwEVMxEhNTMVIREzBADAgMD+AIABQIABQIABYMABIKDA/gAg/sDAwAFAAAAAAAEAAAAAAAA8y2TlXw889QALBAAAAAAA2PX6pwAAAADY9fqnAAAAAAQAA2AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAUEAAAAAAAAAAAAAAACAAAABAAAAAAAAAAACgAUAB4APgABAAAABQARAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');