Jump to content

Problems with using <span> to use different fonts

Recommended Posts

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!

Screen Shot 2020-09-10 at 1.40.11 PM.png

Screen Shot 2020-09-10 at 1.40.27 PM.png

Link to comment
  • Replies 2
  • Views 1k
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.