Letter spacing issue with 'overlapping' character

Posted by Wesz-T on Stack Overflow See other posts from Stack Overflow or by Wesz-T
Published on 2012-09-20T20:19:19Z Indexed on 2012/09/20 21:38 UTC
Read the original article Hit count: 216

I'm having some trouble with a font I found on Google Web Fonts.

As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves me with an ugly space between the two characters.

Is there any way to fix this and make it look like the one in Firefox? Or should I start looking for another font?

Chrome/IE & Firefox Comparison

My HTML:

<html>
<head>
    <meta charset="utf-8">
    <title>Versus</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
    <div>
        <h1>Versus</h1>
    </div>
</body>

My CSS:

h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;

}

Thanks in advance!

© Stack Overflow or respective owner

Related posts about css

Related posts about fonts