Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Problems with using <span> to use different fonts


MarissaChance

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...