How do I display the Bebas Neue font in Safari on iOS?

Question

How do I display the Bebas Neue font in Safari on iOS?

The Bebas Neue font is not displayed on iOS and the text is shifted to the left. In browsers on Windows, Android, macOS works.

Screenshot, link to GitHub Pages.

@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;
    }
  }

Connecting styles:

<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>

Block:

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

0

html css ios шрифты

Author: Igor R., 2020-10-20

Source

1 answers

score 0 · Accepted Answer

It turned out that the font name "Bebas Neue"is not perceived. You can fix it by renaming the font.

Was:

@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;
}

Become:

@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;
}