Вопрос

Как исправить отображение шрифтов на мобиле?

Продолжаю воевать с шрифтами. В браузере компьютера добился того, что надо:
Заголовки — Montserrat Alternates

Основной шрифт — Sofia Sans, причем поборол отказ рисовать в русском нужное начертание

fonts-pc.PNG

А вот на мобиле почему-то полный игнор шрифтовых семейств :(
fonts-smart.jpg

Подскажите, что делаю не так? в какую сторону копать?

Проект — https://astralus.pro/info/article/privacy

CSS

3 Комментария

  1. У вас какие-то ошибки, он пытается загрузить файлы которых нет.

    image.png

    /assets/fonts/MontserratAlternates-ExtraBold.woff2
    /assets/fonts/MontserratAlternates-SemiBold.woff2

    Т.е. Montserrat Alternates файлов то нет, если надо, то надо их залить.

    Сам шрифт в заголовках вижу, прописан:

    h1, h2, h3, h4, h5, h6 {
      font-family: "Montserrat Alternates", sans-serif;
      color: #EE3560;
    }

    И основной шрифт прописан в css вижу:

    body {
      font-family: "Sofia Sans", sans-serif;
      font-feature-settings: "locl" 0;
      ...
    }

    А вот подгружается он или нет, вопрос. Я не особо силен в этих шрифтах, но ошибки бы желательно убрать. Файлы залить нужные.

  1. Хм… сейчас проверил, что в папке public/assets/fonts — шрифты отсутствуют.
    Залил вручную, ошибки ушли, но в телефоне без изменений…

    P.S. Интересно, а почему в боаузере шрифты отображались при их отсутсвии в паблике?

  1. Возможно у вас в кэши вашего браузера шрифты есть. А вот я захожу, у меня нет и они должны докачаться, а их нет. Как-то так вроде.

    По поводу телефона сказать не могу, может быть стоит обновить кэш на телефоне?