Не отображать шрифт в Mac Safari при добавлении пользовательского семейства шрифтов и применять к телу

Question

Просмотр в Mac Safari:

Просмотр в Windows Chrome:

Вот стиль CSS

@font-face {
    font-family: Gotham HTF Light;
    src: url(gothamlight.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");}
@font-face {
    font-family: Gotham HTF Book;
    src: url(gothambook.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");
}
@font-face {
    font-family: Gotham HTF Medium;
    src: url(gothammedium.ttf) format("truetype");
    src: url(gotham-black.otf) format("otf");
}


html, body {
    text-rendering: optimizeLegibility;
}
body{        
    font-weight:normal;
} 
*{
    font-family:'Gotham HTF Light';
    font-weight: normal;
    font-style: normal;
}
input, select, textarea, button,label{
    font-family:inherit; 
}

Как можно решить эту проблему, если я удалил семейство шрифтов: 'Gotham HTF Light';тогда он работает нормально, но когда я применяю собственный шрифт, он не работает с полями формы.

Answer 1

У меня была эта проблема, и оказалось, что файл .ttf, который я использовал, был неисправен.Я не сразу понял это, потому что в chrome работал.

Чтобы решить проблему, я просто скачал другой файл .ttf (который работал в Safari).

Answer 2

User all font format to support all browse and safari too, Try This

@font-face {
    font-family: 'Gotham HTF Light';
    src: url((gothammedium.eot);/* IE9 Compat Modes */
    src: url((gothammedium.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */       
         url(gothammedium.woff2) format('woff2'), /* Super Modern Browsers */
         url(gothammedium.woff) format('woff'), /* Pretty Modern Browsers */
         url(gothammedium.ttf) format('truetype'), /* Safari, Android, iOS */
         url(gothammedium.svg) format('svg');/* Legacy iOS */
}