Пользовательский шрифт смещен в мобильных браузерах

Question

Текст моего меню как-то смещен в некоторых мобильных браузерах. Он использует собственный шрифт. Я не могу воспроизвести эту проблему на любом настольном браузере.

Настольные браузеры:

Samsung Inte rnet и iOS:

HTML:

<div id="menu" class="menu-bar">
  <div class="menu-bar-filler"></div>
  <a href="/#menu"><div class="menu-bar-item">Pictures</div></a>
  <div class="menu-bar-item">Instagram</div>
  <div class="menu-bar-item">Contact</div>
  <div class="menu-bar-filler"></div>
</div>

CSS:

.menu-bar a, .menu-bar a:hover {
  color: #1E1E1E;
  text-decoration: none;
}


.menu-bar-item {
  font-family: "Bebas Neue", sans-serif;
  font-size: 42px;
  margin: 8px 42px;
  /*line-height: calc(42px * 0.8);*/
}

.menu-bar-item.selected {
  font-family: "Bebas Neue Regular", sans-serif;
}

@media (max-width: 640px){
  .menu-bar {
    grid-auto-columns: min-content;
    grid-template-columns: auto auto auto;
    margin: auto;
    padding: 0 6.5625vw;
  }

  .menu-bar-item {
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    /*padding-top: 4px;*/
    font-size: 6.8739770867vw;
    font-size: 42px;
    /*line-height: calc(6.8739770867vw * 0.8);*/
    margin: 1.25vw 0;
  }

  .menu-bar-filler {
    display: none;
  }
}

Вы можете посетить текущую версию страницы по адресу jesper.rchristiansen.de .