Мобильные Firefox и Chrome не распознают @ font-face - PullRequest
Новая
       24

Мобильные Firefox и Chrome не распознают @ font-face

0 голосов
/ 19 апреля 2019

Я использую определенный шрифт на своем сайте.Firefox и Chrome распознают его на ПК (локально и на сервере), но не на мобильном (Firefox и Chrome).Я использую @ font-face в своем файле CSS.

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

Вот мой HTML: 

 <div class="welcome">WELCOME</div><div class="home">HOME</div>

Вот мой CSS: 

@font-face {
    font-family: 'typographicaregular';
    src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
         url('../fonts/typographica.regular-webfont.woff2') format('woff');
    font-weight: normal;
    font-style: normal;}

.welcome {
    width: 47%;
    padding: 0;
    margin: 0 auto;
    font-family: 'typographicaregular', sans-serif;
    font-size: .7em;
    letter-spacing: 26px;
    text-align: center;
    color: #004391;
}
.home {
    width: 85%;
    padding: 0;
    margin: -40px auto 0;
    font-family: 'typographicaregular', sans-serif;
    letter-spacing: 12px;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    color: #004391;
}

Он должен показать фактический шрифт на моем телефоне Android иiPad, а не универсальный шрифт san-serif.

1 Ответ

0 голосов
/ 19 апреля 2019

Это похоже на дубликат: @ font-face Не работает в Chrome для Android

Проблема может быть связана с вашей декларацией font-family (не могу сказать, потому чтоВы не опубликовали эту часть).Например, если у вас есть это: 

font-family: fghjkjh, 'jump_startregular', sans-serif;

... Chrome для Android просто сделает вид, что установлен fghjkjh (но на самом деле использует шрифт Android по умолчанию) и проигнорирует все остальное.(Не уверен, что это ошибка или особенность.)

В этом случае решение состоит в том, чтобы переместить 'jump_startregular' вперед - и, возможно, вместо этого добавить источник local в блок @font-face., что, вероятно, вызывает проблемы с другими более старыми браузерами.

"Взял слово в слово из ссылки, упомянутой выше"

Если это не сработает, я предлагаю вместо этого использовать шрифты Google.

...