scroll-snap-points

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;