Question

So I have a typeface I've been including in a couple sites lately called Kondolar. It's a lovely typeface and I'm actually using 4 weights of the font, so there are actually 4 @font-face definitions in my stylesheet each with their own src files.

For reference, the sites are: http://joelglovier.com, http://blog.joelglovier.com (tumblr's server) and http://hoverfx.com

So the issue I am coming across is that punctuation in these fonts is floating up to the middle of the text line, rather than being at the baseline for the font. I don't think it's an issue with the font itself, for two reasons:

  1. the font does not display this behavior in Photoshop, InDesign, Illustrator, or any other software locally.
  2. the really strange thing is that there is one location on one of those sites where the issue is not occuring: http://joelglovier.com in the intro copy at the very top of the page.

So I am leaning toward believing it is an issue with my styles, but after inspecting with Firebug and looking at all applied styles AS WELL AS computed styles, I just can't see what's causing it.

Further, there is one point that would lead me to think maybe it's an issue with the font file itself (point number two above not withstanding): I have another @font-face rule (yes, a 5th) for the font called League Gothic, and I'm not seeing the same issue with instances of that typeface on the page.

So what on earth is causing this floating punctuation?

*EDIT: It appears the characters affected are the period and colon. The question mark, dash and comman all appear to properly align with the font baseline.

*Here's a screenshot: http://www.cl.ly/6tLs

Was it helpful?

Solution

It appears as Nick suggested that my stylesheet must be calling the local copy of the font instead.

I tried the site on my windows virtual box, and as the question commenters have said, all looks well.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top