Problems with using <span> to use different fonts

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 am editing my website in Chrome, however when I opened it in Safari or on my phone the font size or the entire font itself has changed. On Safari the fonts are displaying at completely different sizes and on my phone the font that I added in the code has been changed to a default font. (I have attached some screenshots, one from Chrome and one from Safari)

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!

Replace i tag with em tag

<em>

</em>

The i tag I only use to italicize a word within the code so it didn't fix the problem that I am having throughout every instance on my site where I use custom HTML code blocks.