Custom font appearing bolder on mobile only

Hi there, 

Any help is appreciated on how to resolve this issue...

On mobile only, specifically on my portfolio pages the custom font I have appears bolder than on desktop. 

The below is how I call the font. 

@font-face {
font-family: Perfectly Nineties Semibold;
src: url(https://static1.squarespace.com/static/63bfc086c9fdd579dec90fb5/t/63c6246b25a99b52c9874dca/1673929835998/PerfectlyNineties-Semibold.woff);
}

h1 {
font-family: 'Perfectly Nineties Semibold';
font-weight: 400 !important;
}

Can you share your website URL so that I can have a look at why this is happening? Thanks!

@media screen and (min-width: 768px), screen and (max-width: calc(1511px)) and (orientation: landscape){
h1 {
    font-size: calc((3.5 - 1) * 1.2vw + 1rem);
}
}