Friday 29 Jul 2011

Fonts look different in Firefox 5

CSS

The version 4 of Firefox was quickly forgotten, undoubtedly to have larger numbers faster to "join" competition: Opera 10, IE 9, Chrome 276...

You may have noticed since your passage to Firefox 5 that the font of your site or other Web sites displays a little differently: thicker, more spaced or higher lines, even another totally police. :-o

All these changes come from material acceleration, an option which can be deactivated in the Options, Advanced panel. If you are a simple user of Firefox 5 and that you want to find old display, you can uncheck this option. But if you are creator of Web sites, it's better to accustom you to this new standard.

~

By using the engine of the video card, the browser handles more possibilities of fonts, it can return text various thicknesses (light bold, bold, bolder…). Thus you must pay attention to "stackings" of bold. For example:

<p style="font-weight:bold">Some <strong>important</strong> text...</p>

  • displays with traditional display a line in bold in a uniform way,
  • displays with material acceleration it returns the "important" word in double thickness.

~

The line height can also change with the pilot of DirectText display via the video chart. Perhaps you will have to specify the property "line-height" in your CSS to have the same height returned in the other browsers.

~

But more serious, the fonts made with sub-fonts can not be found by Firefox 5 in the same way with or without material acceleration (I do not know yet if it's a bug). For example, without material acceleration or in the other browsers it's necessary to indicate 'Franklin Gothic Medium' to use this sub-font, but with material acceleration it's not found unless indicating "Franklin Gothic" only, the thickness is a separate treatment.

If your CSS uses police with indications thickness or style (medium, bold, italic, normal...) you will undoubtedly have to indicate the two names so that all the browsers finds it. For example:

font-family: "Franklin Gothic Medium", "Franklin Gothic", Arial, sans-serif;

~

Some big sites such as Yahoo, CNN, MSN or Fotolia have been surprised by this update of Firefox (which will be surely imitated by the others browsers soon) and have troubles with fonts in double or triple bold because they piled up <strong> element. If you want to do better, check on your sites and verify that you did not make the same mistake! ;-)


cafĂ© Did this article help you? 
Buy me a coffee!

Leave a comment (all comments are moderated, don't waste time with spam)

Azure Dev