CODEWITHSUNDEEP
cssfirefoxreset
maaartinus
maaartinus

Reputation: 46422

Why does Firefox ignore my globally specified font?

Hoping that it makes my pages look the same in modern browsers, I included some reset.css with the following lines

body {
    *font-size: small;
    font-family: arial,helvetica,sans-serif;
    font: 16px/18px sans-serif;
    margin: 0 auto;
}

However, the font in my Firefox 20 (for Ubuntu Canonical - 1.0) was still by a few per cent bigger than in my Chromium 25.0.1364.160 Ubuntu 10.04. Funnily, the following rule helped:

* {
    font-family: arial,helvetica,sans-serif;
}

It looks like Firefox overrides the font for span, too, but I can't see it in the Web Developer Tools. It simply chooses a different font, although it shouldn't.

I've created a plunk showing it (just drop the star rule to see the change). My questions are

Upvotes: 1

Views: 698

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The explanation is that font: 16px/18px sans-serif sets the font family to sans-serif, which is a browser-dependent default sans serif font. It overrides the preceding font-family setting. Apparently, in your Firefox, sans-serif is mapped to a font that looks smaller than Arial, for the same font size. So the font size is the same, the letters are just smaller.

The simplest fix is to revert the order of the two declarations:

body {
    font: 16px/18px sans-serif;
    font-family: arial,helvetica,sans-serif;
    margin: 0 auto;
}

(The *font-size hack is pointless here, since you have a rule later that sets the font size.)

Alternatively, you can combine the rules:

body {
    font: 16px/18px arial,helvetica,sans-serif;
    margin: 0 auto;
}

The question “what's the proper way of resetting styles?” is primarily opinion-based and also independent of the technical problem presented. Setting font properties on body isn’t really “resetting styles”, just normal styling. Technically, setting e.g. font-family on all elements has a considerable impact, and you should do that only if you really understand the impact (e.g., on form fields, on elements like code, etc.).

Upvotes: 3

Related Questions