Объявления @font-face не работают в интернет-браузере Android 4.3?

У меня такая же проблема, как я ее решаю.

Я использую svg только на мобильных устройствах с медиа-запросами.

@media only screen and (max-width: 320px) {
@font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }

}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

Надеюсь, это поможет вам.

Мы столкнулись с похожей проблемой, и это было вызвано тем, что мы использовали text-rendering: optimizeLegibility — удаление этого из нашего CSS заставило наши шрифты снова начать работать на 4.3.

Я создаю jsfiddle только со шрифтами svg и woff и тестирую его на своем устройстве Android 4.3 в браузере по умолчанию. Все работает.

Я просто удаляю все ненужные шрифты для мобильных устройств. Все мобильные поддерживают svg шрифты, FF и IE10 потребности woff. Таким образом, вы можете использовать медиа-запросы для отдельного определения шрифта: для мобильного и для рабочего стола.

Если вам нужны все типы шрифтов, проверьте заголовок Content-Type для файлов шрифтов, это всегда text/plain, что неверно:

• eot имеет тип application/vnd.ms-fontobject
• otf и ttf имеют тип application/octet-stream
• woff имеет тип application/font-woff
• svg имеет тип image/svg+xml

Также посетите эту страницу, чтобы прочитать об известных распространенных проблемах с font face .

У меня была похожая проблема раньше, и я решил ее, добавив font-weight: normal !important; к элементам/тексту, в котором использовался шрифт. Я считаю, что проблема заключалась в том, что вес шрифта наследовался элементами, и это приводило к сбою шрифта. Надеюсь, что это работает :)

Итак, в вашем коде:

h2 {
    font-family: 'OpenSansSemibold', Arial, sans-serif;
    font-weight: normal !important;
    /* ... */
}

Вы также можете использовать решение Beacouron для медиа-запроса, ориентированного на мобильные устройства, но это может быть сложно, если у вас есть различные разрешения планшетов Android для таргетинга.

Еще одна идея, возможно, использовать медиа-запрос, ориентированный на браузеры webkit, например:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'open_sansbold';
        src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

С 2017 года можно использовать запрос @import, предоставленный fonts.google.com, для шрифта, который вам нравится. Просто найдите нужный шрифт (шрифты), выберите его, затем на свернутой панели в нижней части экрана вам нужно будет выбрать @import в разделе «встроить». Я приложил скриншот для справки: https://gyazo.com/f959b6ef973d4b0df467a7a336cc3698

У меня была такая же проблема в браузере мобильного телефона по умолчанию, но после того, как я использовал этот синтаксис, проблема была решена. Не знаю почему, но это сработало.