CSS - Specifiying fonts on Safari

Question

OK so since FixedSys won't display in Chrome or Safari I make it switch to Lucida Console. It works for Chrome but for Safari I run into an issue. Unless Lucida Console is by itself, it WILL be to the font I said. If not -- then it won't work.

Have a look at this picture:

I don't know what font the first Hello world! is but it's weird. It's weird because the default font on my Safari is Times New Roman. I have checked. Also, it's not in conflict with any other style because I have tried it by itself and the problem persists.

What am I doing wrong?

Thanks.

Answer 1

Does it work if you include quotes around "Lucida Console"?

Answer 2

font-family's fallback feature works based on installed fonts: if you have FixedSys installed, Safari will attempt to use it. You mentioned that FixedSys "won't work" in Chrome or Safari: it could be that it's interpreting FixedSys incorrectly or that your FixedSys is corrupt.

As Safari 4.0 final was released in 2009, and the current stable release of Safari is 5, it's very likely that there was a problem in Safari 4 beta's font rendering code.

If you have a font installed, there's no way in browsers that support CSS correctly (Safari, Chrome, Firefox, later versions of IE) to say "fallback to the next font even if you see that I have the first font installed". Instead, you'll either need to resolve your issues with FixedSys (that is, upgrade to a stable version of Safari to see if it fixes it) or remove it from the font-family list.

A few other notes:

• Lucida Console is not installed on most Macs, so if you're trying to be cross-platform, you need to provide a fallback (like monospace).
• The CSS spec requires multi-word fonts to be enclosed with quotation marks. Your CSS should look like: font-size: FixedSys, "Lucida Console"