Материал Icons ligatures electronic OSX

Question

Я пытаюсь использовать значки Google Material в электронном приложении и сталкивался с проблемой при отображении значков. Значки отлично отображаются в Windows, но не на OSX. Используя devtools, я видел, что оба запрашивают шрифт как «woff2», но только Windows отображает значок ... OSX просто перечислит текст лигатуры.

Окна (слева), OSX (справа)

Эти работы в Windows, строить, но не OSX ... он просто перечисляет home или 

<i class="material-icons">home</i> 
<i class="material-icons">&#xE88A;</i> 

У меня есть также испробовал

<i class="material-icons" id="test"></i> 
#test:after{ content: 'home' } 

Не уверен, что проблема с хромом для OSX, проблема с шрифтом ОС или что? Если бы кто-нибудь мог дать какие-либо рекомендации по некоторым вещам, чтобы попробовать, я был бы очень благодарен за помощь.

Вот CSS используется

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(./fonts/Material-Design-Iconic-Font.eot); /* For IE6-8 */ 
    src: local('Material Icons'), 
     local('MaterialIcons-Regular'), 
     url(./fonts/Material-Design-Iconic-Font.woff2) format('woff2'), 
     url(./fonts/Material-Design-Iconic-Font.woff) format('woff'), 
     url(./fonts/Material-Design-Iconic-Font.ttf) format('truetype'); 
} 

.material-icons { 
    font-family: 'Material Icons'; 
    font-weight: normal; 
    font-style: normal; 
    font-size: 24px; /* Preferred icon size */ 
    display: inline-block; 
    line-height: 1; 
    text-transform: none; 
    letter-spacing: normal; 
    word-wrap: normal; 
    white-space: nowrap; 
    direction: ltr; 

    /* Support for all WebKit browsers. */ 
    -webkit-font-smoothing: antialiased; 
    /* Support for Safari and Chrome. */ 
    text-rendering: optimizeLegibility; 

    /* Support for Firefox. */ 
    -moz-osx-font-smoothing: grayscale; 

    /* Support for IE. */ 
    font-feature-settings: 'liga'; 
} 

Answer 1

Итак, я не 100% уверен в том, что вопрос, но хотел опубликовать обновление, если это может помочь кому-то еще.

На моей сборке Windows у меня был установлен шрифт MaterialIcons-Regular.ttf ... как только я скопировал его, а затем удалил, приложение Windows прекратило рендеринг.

Затем я скопировал MaterialIcons-Regular.ttf в папку шрифтов в моем электронном проекте, а затем обновил свой CSS, чтобы выглядеть

@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(fonts/MaterialIcons-Regular.ttf) format('truetype'); 
} 

Теперь, кажется, работает ... Не уверен, что если что-то случилось с другие наборы шрифтов или если у меня некорректная настройка css.