@font-face stops scroll-snap-points from working?

Question

I understand it's still very new and experimental, but have been playing around with css scroll-snap, and couldn't get it to work for a while.

I eventually realised that whilst I am using @font-face in my css, scroll snap doesn't work. If I change the font-family to 'Arial' instead of my defined font, it works fine.

Anybody else come across this?

Codepen: https://codepen.io/galvinben/pen/LgzLxK

@font-face {
  font-family: 'fontName';
  src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}

body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  font-family: 'fontName';
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#one {
  background-color: #222;
}

#two {
  background-color: #333;
}

#three {
  background-color: #444;
}

#four {
  background-color: #555;
}

(May have to refresh the page to see it work/not work after changing font-family.)

Answer 1

I'm having issues with this at the moment as well. It seems to only affect Chrome.

The only way I've been able to get around it so far is to make the scroll parent an element other than the body. This, however, is not ideal as you lose native mobile functionality with the shrinking address and tool bars.

Here's a working fork anyway: https://codepen.io/treechime/pen/pxVeVr

html, body {
    height: 100%;
}

.wrapper {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;

    scroll-snap-type: y mandatory;
}

.section {
    scroll-snap-align: start;
}

<div class="wrapper">
    <div class="section">one</div>
    <div class="section">two</div>
    <div class="section">three</div>
</div>

EDIT:

Adding a class via javascript at the end of the document seems to also do the trick and saves having to add superfluous elements.

body.snap {
    scroll-snap-type:y mandatory;
}

<script>document.body.classList.add('snap')</script>

OR to not rely on JS for snapping to work

body {
    scroll-snap-type:y mandatory;
}

body.fix {
    display:inline-block;
    width:100%;
}

<script>
    document.body.classList.add('fix');
    setTimeout(function() { document.body.classList.remove('fix'); }, 0);
</script>