0

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!

jb93
  • 77
  • 8

1 Answers1

1

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

jb93
  • 77
  • 8
  • 2
    The "issue" is actually that FireFox implements font drawing *better* than Chrome. This character pairing is achieved through OpenType GPOS ["kerning"](http://en.wikipedia.org/wiki/Kerning). As such, it's a bit unusual to do so, since kerning is meant to adjust "awkward" spaces between perfectly normal letter pairs. The canonical example is "VA"; unkerned, using the *natural* width of each characters, the *visual* space is too wide. Hence, in general, you want kerning. It's possible the other font you used does not contain kerning at all, or it happens to not contain this pair. – Jongware Apr 19 '14 at 21:30
  • 1
    By the way: usually, inserting a Zero Width Space between "o" and "q" should have helped. It's a common use of this special character to prevent ligatures from ligating. **However**, because this is *not* a ligature (as it ought to have been), the trick does not work. – Jongware Apr 19 '14 at 21:33
  • Thanks for the feedback @Jongware, seems like an issue with the font's lack of kerning in Google Web Fonts – jb93 Apr 20 '14 at 13:24