Custom icon set not displaying in Safari - css

Question

I created some icons using FontForge, and the icons work in all modern browsers except for Safari. What would be causing Safari to be the only browser that doesn't display the fonts?
This is the SCSS that is being used:
#font-face {
font-family: 'MyFont';
src: url('/assets/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.my-font-icon {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
&:before {
font-family: 'MyFont';
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
&.my-font-questions:before {
content: "\0001";
}
&.my-font-chevron-left:before {
content: "\0002";
}
&.my-font-close:before {
content: "\0003";
}
}

Answer 1

Safari requires the TrueType/ttf font version and really you should be including several different types rather than just woff2 which is the most modern type. Here's a sample list from the CSS Tricks article here, the browser finds the font it understands and renders that one:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
FontForge should provide you these other font types, but if it doesn't, you'll need to go to FontSquirrel to render them (if you have the licence and permission to do so):
https://www.fontsquirrel.com/tools/webfont-generator