CSS - default font in Firefox

In my CSS stylesheet I have:

body { font-family: Arial }

This is like a global rule, i.e. any elements without a font specified should render in Arial.

Now I have some elements with font "Century Gothic". For example:

h1 { font-family: Century Gothic }

This font is not always available on a user's PC. In this case, when using IE (all versions) what happens is that the Arial font is rendered instead for those elements (taken from the 'body' rule).

In Firefox however, this does not happen. Instead it renders in the 'Default Font' setting as specified in the browser options.

The way round this of course is to specify Arial alongside Century Gothic for those elements. But this is not my preferred way of doing it.

How can I make it always fallback to Arial font when the desired font is not available?

 

Did you try to validate your CSS as you're missing the semicolon after the declared CSS rule.

 

You don't need a semi-colon after the last rule.

 

Arial is not available on all systems. Firefox works on all systems. So setting the default font to Arial would be a mistake. IE does not work on all systems but Arial is available on Windows.

 

Can someone please answer the question I have asked.

Basically I specify Arial as the global font (body tag), Firefox comes across an element that uses a font that is not available on the system. It consequently renders the element using the "default font" setting in the browser options. IE will render the element in the global font - this is the behaviour I want.

 

Oh! Sorry. Didn't realize I missed the actual question. The answer is very simple and easy to do but I don't like your response so you can wait for someone else.

 

Anyone able to advise the correct solutions? Thanks.

 

I don't think you can unless, as you said, you specify Arial after Century Gothic. You can use "inherit" but not alongside other fonts... this is "font-family: Whatever, inherit" won't work.

 

h1 { font-family: Century Gothic, Arial }
This way, if Firefox won`t find century gothic, it will use arial

 

When defining fonts, please make sure you're using several fall-backs and are encapsulating spaced names between apostrophes, like so:

h1 { font-family: 'Century Gothic', Arial, Verdana, sans-serif; }

Code (markup):

This allows maximal fall-back, and compatibility with the stingy browsers who don't like spaced font names.

 

Please read the question carefully, he *knows* that's a solution (and of course it's the best IMO) but he wants the font to fall-back into the parent font, not the default in case Century Gothic is not present.

 

body { font-family: Arial }

This works perfectly fine for elements that don't have a font defined. It means I don't have to define a font-family for every single div - I have basically defined Arial as the "base" font.

It's no problem for me to just specify Arial alongside Century Gothic for the 20 or so elements on my site that are affected by this issue, but I don't understand why Firefox ignores the "base" font and goes straight to its own default font...

 

If you declare a font family that is not available to the browser, and you do not declare a fallback font or generic family, the browser should revert to the "initial" font family. This "initial" font is determined by the browser, and that comes from the user configuration. Firefox has handled the issue properly. If your IE defaults to Arial, IE may or may not be doing the right thing. Choose a different font-family for body, and declare a font-family for the other element that is not available to your machine. See what happens.

'font-family'
    Value:          [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
    Initial:        depends on user agent
    Applies to:     all elements
    Inherited:      yes
    Percentages:    N/A
    Media:          visual
    Computed value: as specified 

Code (markup):

cheers,

gary

 

OK using Firebug I switched off the "font-family: Century Gothic" property from a div element and guess what? It falls back to the <body> font family property.

This is exactly how I perceive it should work - the inherited/base style should be applied.

Although I suppose it's slightly different in my scenario as the CSS property isn't being "switched off" as such...

 

Try using:

* {font-family: Arial}

Code (markup):

Instead of body.

 

That seems to have done the trick!

EDIT: Actually it's not exactly perfect, as it seems to be overriding most of the styles.

 

True. Once you declared the font family, the degradation runs preferred font, alternate font(s), generic family, initial font.

cheers,

gary