Custom font problem - different font weight on different browsers/devices

Site URL: https://www.michalgrzymski.com

Hello,

I have a problem with my custom font Inter (non-Squarespace font). I have implemented some custom CSS. The font weight is not consistent across different devices and browsers (see attached images).

Can you help me with that?

Thank you in advance!

@font-face {
    font-family: 'Inter';
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2');/* Super Modern Browsers */ 
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */
}

.sqs-block-image .design-layout-collage .image-title p {
   font-family: 'Inter';}
.sqs-block-image .design-layout-collage .image-subtitle p{
font-family: 'Yantramanav';}

h1 {
  font-family: 'Inter';

  font-weight: 700;
  
  font-size: 72px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h2 {
  font-family: 'Inter';

  font-weight: 500;

  font-size: 33px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h3 {
  font-family: 'Inter';

  font-weight: 400;

  font-style: Regular;

  font-size: 18px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

body {
  font-family: 'Yantramanav';

  font-weight: 400;

  font-style: Normal;

  font-size: 16px;

  letter-spacing: 0em;

  text-transform: None;

  line-height: 2em
}

.sqs-block-button .sqs-block-button-element {
    font-family: 'Inter';
}
.sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a {
  font-family: 'Inter';
}

.Header-nav {
  font-family: 'Inter'; 
}

.has-site-title .Header-branding{
    font-family: 'Inter';
}

.has-site-title .Mobile-bar-branding {
      font-family: 'Inter';
        font-weight: 700
}

.tweak-mobile-overlay-menu-primary-style-button.tweak-mobile-overlay-menu-secondary-inherit .Mobile-overlay-nav .Mobile-overlay-nav-item {
        font-family: 'Inter';
        text-transform: uppercase;
        font-weight: 700
}

.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-title p {
  font-family: 'Inter';
  font-weight: 450;
  font-style: Regular;
  font-size: 33px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1em
}

.image-block-card-dynamic-font-sizing .sqs-block-image .design-layout-card .image-subtitle p {
  font-family: 'Yantramanav';
  font-weight: 400;
  font-style: Normal;
  font-size: 16px;
  letter-spacing: 0em;
  text-transform: capitalize;
  line-height: 2em
}

.sqs-block-image .image-block-outer-wrapper.design-layout-card .image-button a {
    font-family: 'Inter';
    padding: 1em 2.5em;
    border: 0px solid #000;
    background-color: #000;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .01em;
    line-height: 1.1em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5em;
}

.Index-page-scroll-indicator-text {
font-family: 'Inter';
font-weight: 400;
text-transform: uppercase;
letter-spacing: .0.5em;
}

Maybe problem came from font. Have you try checking font on original site yet? If it has same problem, you need to contact font author.