: How can I make fonts render the same way across different web browsers? I am building a website for a client, and we had hoped to use plain text, not images in the navigation bar. The
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.
More posts by @Debbie626
3 Comments
Sorted by latest first Latest Oldest Best
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: meyerweb.com/eric/tools/css/reset/
Doctype Declaration. htmlhelp.com/tools/validator/doctype.html
Actually there is a method of embedding fonts in your CSS. Its extremely easy. Refer to 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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.