12

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 differently. 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 it's a matter of being more specific in declaring font properties? Honestly I am stuck and need help.

Improve this question

3 Answers 3

Reset to default
14

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.

Improve this answer
6
  • 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 Lysobey
    Mar 3, 2011 at 14:45
  • 1
    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, 2011 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, 2011 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 Lysobey
    Mar 3, 2011 at 17:00
  • 1
    @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, 2011 at 17:04
1

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.

Improve this answer
3
  • 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, 2011 at 16:50
  • That Flash method is called sIFR. It's has it's pros and cons as well.
    – John Conde ♦
    Mar 3, 2011 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, 2011 at 16:54
0

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

Improve this answer
1
  • This answer is blatantly false. A doctype has nothing to do with font rendering and a CSS reset only does what your CSS for fonts should already be doing. The only minor, correct statement is the first sentence.
    – Rob
    Jan 17, 2021 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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