Headings are bolder on mobile, help

Hey everyone!

I have two font issues going on that only manifest when I look at my website on my iPhone. Mobile mode does not show it on the desktop, and the fonts work as they should when navigate the website on the desktop. I have custom fonts that I've designated for headings and body copy.

Problem 1: 
The headings are appearing extra extra bold on mobile. How can I cancel out this weight so that the font is viewed as its designed? 

Problem 2:
Body copy and color are reverted to whatever template font I have set for the website. How do I force my custom font to show up on mobile? 

Again, I'm only seeing these issues on my mobile phone. 

First screenshot is how it SHOULD look on mobile. Second screenshot is the problem. 
 

Additionally, here's my code: 

h1 {font-family: 'EmysAltBlack'
  !important;
}

h2 {font-family: 'EmysAltBold'
  !important;
}

h3 {font-family: 'EmysAltBold' !important;
}

h4 {font-family: 'EmysAltReg' !important;
}

p {font-family: 'Andes'
!important;
}

Hi,

Can you share link to page in screenshot?

Yeah, the screenshots are here: https://www.andreamelania.com/work/locallands

If your font does not have dedicated bold style then on desktop the browser tries to render it automatically whereas on mobile devices it causes problem. You can try including: 

-webkit-font-smoothing: antialiased;

if that does not help, then please provide some more details about how are you including your custom font in the site. does your @font-face declaration has bold style or not.

To give an example, here is the declaration of font with the same name and different weights:
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/#style-linking

The link is pointing to the section where they have used two different files for different weights of the font. So when we use weight 700, it uses  Ubuntu-B-webfont.eot font to render bold style and when you use weight 400, it uses Ubuntu-RI-webfont.eot for normal style. This way, the browser doesn't have to emulate the bold font from normal style.

Vicks, here's the rest of the CSS where the custom typeface is loaded and labeled. Ubuntu shouldn't be anywhere on my site, the two typefaces should be Emy's Alt and Andes. Emy's Alt has three weights I want used: Black, Bold, and Regular as shown below. I appreciate you looking into this!

@font-face {
    font-family: 'EmysAltBlack';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa7a9e63e4552bfd5b0ca/1676650409134/emyslabalt-black.otf');
    }

@font-face {
    font-family: 'EmysAltBold';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa85934eb1063a437e7a3/1676650585248/emyslabalt-bold.otf');
    }

@font-face {
    font-family: 'EmysAltReg';
    src: url('https://static1.squarespace.com/static/62defd12f69ade46d9236166/t/63efa863add14e30df6c2382/1676650595901/emyslabalt-regular.otf');
    }

@font-face {
    font-family: 'Andes';
    src: url('https://static1.squarespace.com/static/54dc343ce4b0c2bd84e1460e/t/5f4d3d06c711810c2e62b238/1598897414385/Latinotype+-+Andes.otf');
    }

/* Font Styles */

h1 {font-family: 'EmysAltBlack'
  !important;
}

h2 {font-family: 'EmysAltBold'
  !important;
}

h3 {font-family: 'EmysAltBold' !important;
}

h4 {font-family: 'EmysAltReg' !important;
}

p {font-family: 'Andes'
!important;
}

.main-nav a {
   font-family: 'EmysAltBold' !important;
}

#site-title {font-family: 'EmysAltBlack'
  !important;
}

Update: adding -webkit-font-smoothing: antialiased; replaced my font to the standard theme font, as did assigning it a specific weight like 700. 

Still having this problem if anyone else has other ideas. 😞

Still having this problem.... has anyone found new solutions around this? @tuanphan?