0

I'm using a Google Webfont called Open Sans with font-weight:800 specified for h1 tags. When I view this page on iOS browsers (Chrome and Safari on iPhone or iPad), the font renders more thinly than it renders in desktop browsers. You can see the difference in this screenshot.

I want the font-weight to render the same on all devices, can anyone help me?

My code:

h1 {
    font-weight: 800;
    font-family: 'OpenSans' 
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,800' rel='stylesheet' type='text/css'>
partlov
  • 13,789
  • 6
  • 63
  • 82
Jason Pearson
  • 105
  • 2
  • 5

1 Answers1

2

I believe you're missing a space here:

font-family: 'Open Sans'
jgthms
  • 864
  • 8
  • 18
  • Well. That was certainly easier than I could have ever imagined. lol. Thank you. It's interesting though that the font displays correctly on desktop browsers as 'opensans', but not on mobile browsers? weird. – Jason Pearson Jan 27 '13 at 18:56
  • Desktop are more accomodating regarding code errors. Or maybe you have an 'OpenSans' font installed on your computer. – jgthms Jan 27 '13 at 19:07