Menu
EDIT: Example here: [Live example removed - question answered]
I'm trying to display this header font the same way and it's appearing differently between Operating Systems. All OSX and Ubuntu browsers display it the same, but when I test it on a Windows machine, it displays differently. The way it's displaying on OSX is how I want it to display (with a tiny part of the bottom hidden behind the lower element).
If I change the CSS (add padding or line-height) it fixes it for Windows but screws it up for OSX.
Is there a work-around that doesn't involve having to put OS and Browser specific selectors in the page via javascript or something? I'm trying to keep the code as pure as possible (ie the least hacky fixes possible).
CSS for Header and H1:
#header {
height:70px;
overflow:hidden;
background-image: url('header-canvas2-bg.png');
background-repeat: repeat-x;
background-attachment: fixed;
}
#header h1 {
font-size: 100px;
font-family:'Josefin Sans';
text-align: left;
color:#ffffff;
}
HTML for header:
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'>
<!--SNIP-->
</head>
<body>
<div id="header">
<h1><a href="#">testing font</a></h1>
</div>
<!--SNIP-->
</body>
Chrome on OSX displays
Chrome on Win 7 displays
EDIT: Example here: [Live example removed - question answered]
942
The culprit was the Google Web Font API. I downloaded the font manually and hosted the font face on my own domain, and the issue is now gone.
So there is some issue with the Google Web Font API that causes rendering differences between operating systems.
This was what I found that prompted me that it could be the issue: http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
So in short, host your own font faces and all appears fine (tested on all common browsers on OSX, Win XP, Win 7 and Ubuntu).
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
