Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am building a website for a client, and we had hoped to use plain text, not images in the navigation bar. The font we are using is Century Gothic (I believe that this font is available on the majority of PCs and Macs) The problem is, that on different browsers the font renders significantly differnt. In Chrome we got it looking the way we want, but in firefox the text is smaller and bolder.

Aside from writing browser specific javascript to alter the font properties, are there any other options to standardize the way the fonts are rendered cross-browser. Perhaps some library or API? Maybe its a matter of being more specific in declaring font properties? Honestly I am stuck and need help.

share|improve this question
add comment

3 Answers

up vote 10 down vote accepted

You're not going to get fonts, and some other things, to render identically across browsers. The handling of fonts is a perfect example. I know Safari on Windows likes to make text bold for some reason. Unfortunately this is how the web works. The variety of browsers, OSes, monitors, graphic processors, etc, out there means there's potentially thousands or tens of thousands of different ways a person can view a web page. So when building for the wbe you have to do it knowing and expecting that your site will not be pixel perfect for everybody. This isn't print. It's the wild wild web.

share|improve this answer
    
Yea, it seems as though this is the unfortunate reality. It seems however that it should be possible for someone to write a piece of javaScript that would make things a little closer to normalized. –  Zach L Mar 3 '11 at 14:45
    
Unfortunately it's not a code issue but a software and hardware issue. It's how the browsers are developed and with hardware acceleration coming it's going to get worse (although your fonts will look smoother for those who have it enabled). –  John Conde Mar 3 '11 at 14:48
1  
This article (and the others in the same series) explains the issues in great detail, should you be curious. blog.typekit.com/2010/12/17/… –  paulmorriss Mar 3 '11 at 15:46
    
Selected your answer as best. You say its not a code issue, but certainly someone could write code so that a single line of text is stretched to a minimum width in pixels. That itself would greatly improve this situation. It could test the rendered <p> width and increase letter spacing accordingly. Maybe? –  Zach L Mar 3 '11 at 17:00
    
@Zach - You can overcome a lot of obstacles with some planning and smart coding for sure. But in the end we can have only just so much control. Basically if you can accept issues like Safari on Windows and code around the rest you should well. –  John Conde Mar 3 '11 at 17:04
add comment

Actually there is a method of embedding fonts in your CSS. Its extremely easy. Refer to http://randsco.com/index.php/2009/07/04/p680 for more information on how to do this. The downside to this is that older browsers (pre ei 7 and ff 3 I think...) don't support this. But the number of people using these old browsers are fast diminishing and its still possible to specify alternate fonts that would work and are usually on most pc's just in case.

Another approach that I haven't used involves using flash. I don't have much information on this other than I know of it.

share|improve this answer
    
On the css note be sure to use only fonts that you won't be violating copyrights if that font is taken by someone else as when you use the css method that font file is available to all who can access your website. –  Kenneth Mar 3 '11 at 16:50
    
That Flash method is called sIFR. It's has it's pros and cons as well. –  John Conde Mar 3 '11 at 16:50
    
As was mentioned on the other answer even using this approach there will be slight differences between browsers and systems but there are things you can do with the remainder of your site design that can compensate and make the site render well across all different configurations. One key thing is to have multiple browsers and preferably operating systems to test your sites on. –  Kenneth Mar 3 '11 at 16:54
add comment

As others have already noted, we do not have total control. But I think it is worth mentioning a couple things I find helpful in getting browsers to render things similarly overall. Both are "back to basics" kind of things that many of you are already doing, but I thought them worth mentioning since the foundation you build upon often sets you up for success or failure...

CSS Reset. The concept is simple, you set HTML tag defaults in a stylesheet to set a common starting point for HTML rendering. Here is an article and example: http://meyerweb.com/eric/tools/css/reset/

Doctype Declaration. http://htmlhelp.com/tools/validator/doctype.html

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.