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

Screenshot , a reference to the 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;
  }
 }

Connection styles:

& lt; Head & gt;
 & lt; Meta Charset = "UTF-8" & gt;
 & Lt; meta name = "description" content = "website selling subscriptions to SUPERGUM gym Omsk" & gt;
 & lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1.0" & gt;
 & lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
 & Lt; title & gt; Fitness center "Supergym" & lt; / title & gt;
 & Lt; link rel = "preload stylesheet" href = "css / fonts-style.css" as = "style" & gt;
 & Lt; link rel = "stylesheet" href = "css / style.min.css" & gt;
& lt; / Head & gt;

Block:

& lt; div class = "hero__title" & gt;
 & Lt; h1 & gt; fitness center & lt; / h1 & gt;
 & lt; ul & gt;
  & Lt; li & gt; Gym & lt; / li & gt;
  & Lt; li & gt; Group classes & lt; / li & gt;
  & Lt; li & gt; Cardio-zone & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;

Answer 1, Authority 100%

It turned out that the name is not perceived font “Bebas Neue”. Fix can be renaming the font.

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

So:

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