Typophile

Web Font Help/Suggestions

chrisschwing

Hello Typophile!

I created a simple sans-serif font for a personal web project I am working on, however, I have stumbled upon a problem with Firefox for Mac OS. "CHRSTPHR" (within an h1 tag) renders decently in most browsers except Firefox for Mac OS (V. 4 tested) in which it shifts down 10/15 pixels or so. I've checked my CSS thoroughly and can't seem to figure out the problem. Check out the last browser window in the following image:

I could just end up using an image for the header, but I am very curious about this inconsistency with the web font (web font was rendered using the Font Squirrel tool). I tried using a similar google font and it rendered with the same problem. You can also check out the demo project live right here: www.chrstphr.info/website/

Any suggestions or thoughts are much appreciated!

Joma

Try checking your line-height or baseline attributes in the CSS. Firefox might be choosing a default value for something that you haven't defined in the CSS. In other words, it might be what isn't in your CSS that is the problem.

There are a lot of reasons that could be happening, but those are worth checking first.

Technically, though, there are probably more helpful places you could ask about cross-browser compatibility than Typophile. Try www.stackoverflow.com! :)

Frode Bo Helland

Might also be a float issue. I seem to remember having some problems with alignment when I had both left and right floats. Anyway, it appears you've moved your site. If I can see the code it should be easier to figure out what's wrong.

H1 tags have default margins that might differ from browser to browser. It's helps to reset some of these things.

Captured from web.archive.org on 19 Aug 2013. view this capture