CSS - default font in Firefox

[Omzy]

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?

[F1Fan]

I think you kinda answered your own question. I believe FF will use the default setting in the client's browser if the current is unavailable. So, really the way to do this is to set the secondary as Arial.

 

Another option would be to provide the font file for each of your fonts for the browser. Like this:

 

@font-face{
font-family: "Example Font Family Name";
src: url("../fonts/exampleFontFile.ttf") format("truetype");
}
body{
font-family: "Example Font Family Name";
}

[Omzy]

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.

[F1Fan]

So you basically want FF to act like IE? Unless you have direct control over what browser users use, you're pretty much out of luck. You can't make FF act exactly like IE, and you can't force users to use a certain browser on a public website.

 

If you do have access to every user's browser, and you have to use FF (on Windows machines), you can use the IE Tab add-on and tell it to always open your site in an "IE Tab." Otherwise, you're just going to have to use the workaround I suggested, or find another of your own. Sorry!

[haku]

F1fan is correct. You can specify a default, but once you specify a font on another tag, that overrides the default, it doesn't work in sync with it. But it's an easy fix - just add both fonts into your overriding font declaration. It's really not that hard.