Как отобразить шрифт Bebas Neue в Safari на iOS?

Question

Шрифт Bebas Neue не отображается на iOS и текст сдвигается влево. В браузерах на Windows, Android, macOS работает.

@font-face {
  font-family: "Bebas Neue";
  src: local("Bebas Neue"),
      url("../fonts/bebas-neue-regular.woff2") format("woff2"),
      url("../fonts/bebas-neue-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bebas Neue";
  src: local("Bebas Neue"),
      url("../fonts/bebas-neue-bold.woff2") format("woff2"),
      url("../fonts/bebas-neue-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

  h1 {
    margin: 0;
    font-size: 109px;
    font-family: "Bebas Neue", tahoma, sans-serif;
    font-weight: 700;
    line-height: 109px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;

    @include tablets {
      font-size: 86px;
      line-height: 86px;
      letter-spacing: 0.17rem;
    }

    @include phones {
      font-size: 78px;
      line-height: 78px;
      letter-spacing: 0.03em;
    }
  }

Подключение стилей:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Сайт по продаже абониментов в спортзал SUPERGUM в Омске">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Фитнес центр "Supergym"</title>
  <link rel="preload stylesheet"  href="css/fonts-style.css" as="style">
  <link rel="stylesheet" href="css/style.min.css">
</head>

Блок:

<div class="hero__title">
  <h1>фитнес центр</h1>
  <ul>
   <li>Тренажёрный зал</li>
   <li>Групповые занятия</li>
   <li>Кардио-зона</li>
  </ul>
</div>

Answer 1

Оказалась, что не воспринимается название шрифта "Bebas Neue". Исправить можно, переименовав шрифт.

Было:

@font-face {
  font-family: "Bebas Neue";
  src: local("Bebas Neue"),
      url("../fonts/bebas-neue-bold.woff2") format("woff2"),
      url("../fonts/bebas-neue-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Стало:

@font-face {
  font-family: "BN";
  src: local("BN"),
      url("../fonts/bebas-neue-bold.woff2") format("woff2"),
      url("../fonts/bebas-neue-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

БЛОГ НА HUSL

Как отобразить шрифт Bebas Neue в Safari на iOS?

Ответы (1 шт):