CODEWITHSUNDEEP
cssfont-facewebfontsgoogle-webfontsgoogle-font-api
jb93
jb93

Reputation: 77

Overlap between letters of Google Font on iPhone and Firefox

I have a logo on my site that uses the Google font "Cinzel". When I view the site on Firefox or on an iPhone, the two centre letters overlap. How could I prevent this overlap from happening?

Note: I have already tried setting letter-spacing with no change in the centre letters.

Related CSS:

.brand {
    font-family: 'Cinzel Decorative', serif;
    text-decoration: none;
    text-transform: lowercase;  
}

.home{
    font-size: 1.5em;
    display: inline-block;
    height: 60px;
    padding: 16px 0px 4px 0px;
    margin-top: 1px;
    color: #000000;
}

Chrome:

enter image description here

Firefox/iPhone:

enter image description here

Thanks for any help!

Upvotes: 0

Views: 741

Answers (1)

jb93
jb93

Reputation: 77

Unfortunately I wasn't able to correct the issue in Google Web Fonts. I resorted to using a webfont kit from FontSquirrel instead and there seems to be no issue. http://www.fontsquirrel.com/fonts/cinzel

Upvotes: 1

Related Questions