Пользовательский набор иконок не отображается в Safari

Question

Я создал несколько иконок, используя FontForge, и иконки работают во всех современных браузерах, кроме Safari. Что может быть причиной того, что Safari будет единственным браузером, который не отображает шрифты?

Это S CSS, который используется:

@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 требует версию шрифта TrueType / ttf, и на самом деле вы должны включать несколько различных типов, а не просто woff2, который является самым современным типом. Вот примерный список из статьи CSS Tricks здесь , браузер находит шрифт, который он понимает, и отображает его:

@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 должен предоставить вам эти другие типы шрифтов, но если это не так, вам нужно go для FontSquirrel для их рендеринга (если у вас есть лицензия и разрешение на это):

https://www.fontsquirrel.com/tools/webfont-generator