Here's an example of the CSS that's giving me grief:
@import 'https://fonts.googleapis.com/css?family=Pathway+Gothic+One';
body {
background: #444444;
}
h1 {
font-family: 'Pathway Gothic One';
text-transform: uppercase;
color: #DD0000;
letter-spacing: 0;
text-shadow: 1px 1px 1px black;
}
<h1>Breaking News</h1>
In Chrome, it looks correct, but in Safari it increases the letter-spacing by 1 pixel.
To prove this, if I change to letter-spacing: -1px
, Safari looks fine, but Chrome looks too squashed.