Custom CSS font not showing up on Mobile

Site URL: https://marissalachance.squarespace.com/

I used this code to add different fonts within the same line of text throughout my website:

custom CSS:

@font-face { 
  font-family: monarcha;
  font-style: italic;
  }

h1{
  text-align: center;
}

This is what I entered as the HTML within the page:

<h1>
 a <i>MOOD</i> BOARD that <span style="font-family: monarcha">inspires me</span>.
</h1>

Everything looks great when I open my site on my desktop, however when I open it on my phone the entire font that I added with custom CSS has changed to a default one. I did notice that I when I change the font under "Miscellaneous Fonts" it changes the font at every place where my custom font is on each page. Another solution could be to change the Miscellaneous Fonts to a different one but only for Mobile, I don't want to change the Desktop design.

If anyone has suggestions on how to fix this or a better way to use more than 1 font in a line of text please let me know!

Hi,

monarcha is Squarespace Font or Custom font?

Monarcha is a custom font from Adobe.

Hi Marissa,

I just posted this same question a few minutes ago. Did anyone managed to solve this for you? If not, I'll make sure to let you know if I get an answer. 

Penny

On 12/9/2020 at 7:29 PM, PennyVozniak said:

Hi Marissa,

I just posted this same question a few minutes ago. Did anyone managed to solve this for you? If not, I'll make sure to let you know if I get an answer. 

Penny

Can you share site url? WE can help easier

Looking forward to seeing the answer as I am having the same issue. 

On 12/16/2020 at 12:36 AM, AdamC said:

Looking forward to seeing the answer as I am having the same issue. 

Can you share site url? We can help easier