Шрифт Roboto не работает в браузерах Safari или Mobile после развертывания в Netlify

Выдергиваю мои волосы здесь.

Я новичок в React, у меня есть семейство шрифтов в моем css, подобное этому. На локальном хосте все в порядке, но когда я развертываю, шрифт Roboto не работает в сафари или мобильных браузерах...

любая помощь будет принята с благодарностью

Спасибо

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif !important;
  border: none;
}

также я использую стилизованные компоненты, я не слишком уверен, имеет ли это какое-то отношение к этому.


netlify reactjs html css roboto
person ryan.    schedule 10.11.2020    source источник
comment
Пожалуйста, разместите ссылку на ваше веб-приложение.   -  person Prathamesh Koshti    schedule 10.11.2020
comment
savetheelephants.netlify.app   -  person ryan.    schedule 10.11.2020

Ответы (2)


arrow_upward
0
arrow_downward

Если вышеуказанное решение не сработало:

Попробуйте загрузить шрифт шрифта вместо импорта шрифта, это может сработать (процедура, упомянутая ниже в 3-м пункте). Некоторые другие вещи, которые вы должны проверить, находятся в этом вопросе SO: Связанный вопрос из Stack Overflow

  1. Вы также должны включить свойства font-weight и font-style (сработало для некоторых)
  • Это должно выглядеть примерно так: 
    font-family: 'Roboto Sans', sans-serif;
font-weight:900;
font-style:italic;
  1. Если вы импортируете шрифт шрифта в файл css следующим образом: 
     @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')
    , измените его и импортируйте в файл html в теге <head> или просто следуйте коду: 
    <head>
 <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" 
  rel="stylesheet">
</head>
  2. Если все вышеперечисленное не помогло, загрузите шрифт из Google Fonts и сделайте это в своем корневом файле css 
     @font-face {
 font-family: 'Font_name';
 font-style: normal;
 font-weight: normal;
 src: local('Font_name'), url('Font_name.woff') 
 format('woff');
 }

*{
  font-family: Font_name
 }
  • После загрузки шрифта из Google Fonts не забудьте переместить файлы .woff в каталог проекта, иначе он не будет работать.
  • Я проверил это на app.lambdatest.com, и это сработало хорошо, и вот скриншот с результатом:

введите здесь описание изображения

person Gayatri Dipali    schedule 10.11.2020

arrow_upward
1
arrow_downward

EDIT: вам не нужно ничего делать, просто ваши правила css неверны в производственной сборке.

Ваш код:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif !important;
  border: none;
}

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

person Gayatri Dipali    schedule 10.11.2020
comment
Не забудьте проголосовать за полезные ответы и принять, когда сможете, те, которые решили вашу проблему. Рад помочь! - person Gayatri Dipali; 10.11.2020