Custom font creating horizontal bottom scroll bar? Please help 🙏🏻

Hi guys,

I'm struggling with my custom css as I wanted to use a custom font for the H1 tag which I have uploaded the font and used the following code to apply it to the website:

@font-face {  
font-family: 'enigma';  
src: url(https://static1.squarespace.com/static/62f5fc15d202395293de4f98/t/63105619a32f67427b02f9ee/1662015001793/TAN+-+ENIGMA.otf);

}

h1 {
  font-family: enigma !important;
}

The problem is that using this font is creating a horizontal scrollbar on the bottom of the website. As soon as I remove this line of code:

h1 {
  font-family: enigma !important;
}

The bottom horizontal scrollbar disappears.... any ideas? I don't want the scrollbar but I do want the font haha! How do I make this work?

I have tried removing all other pieces of css but the bottom scrollbar remains unless I specifically remove the H1 styling 🤪

Site password is admin
 

It looks like the custom font is working fine, and I don't see a horizontal scroll bar.

It may be just that with the scaling text when you change the font it temporarily changes the size and the scroll bar appears until you reload the page.