219

I have a HTML page which includes some text and formatting. I want to make it have the same font-family and the same text-size ignoring all inner formatting of text.

I want to set a global font format for the HTML page.

How can I achieve this?

venkatvb
  • 681
  • 1
  • 9
  • 24
Ruchi
  • 5,032
  • 13
  • 59
  • 84

5 Answers5

332

You should be able to utilize the asterisk and !important elements within CSS.

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

The asterisk matches everything (you could probably get away without the html too).

The !important ensures that nothing can override what you've set in this style (unless it is also important). (this is to help with your requirement that it should "ignore inner formatting of text" - which I took to mean that other styles could not overwrite these)

The rest of the style within the braces is just like any other styling and you can do whatever you'd like to in there. I chose to change the font size, color and family as an example.

Amadiere
  • 11,313
  • 6
  • 41
  • 47
  • 31
    +1 `!important` is useful, but it can get a bit "thar be monsters" if it gets overused. – StuperUser Aug 11 '11 at 12:28
  • 2
    +1 for providing a great use of `!important`. It must always be used as last option. – dShringi Apr 25 '13 at 04:12
  • 4
    Note the use of `!important` here is due to the original poster's requirement, "have the same font-family and the same text-size ignoring all inner formatting of text." If you don't have that requirement, you don't want to use `!important`. – Seth Nov 21 '15 at 15:29
  • 1
    Use of `html * {}` or `body * {}` will help you to avoid override through more specific `body p {}` in included style sheets. `body p {}` is more specific than `body {}`, so the asterisk is an important element here. – YoYo Dec 01 '15 at 19:58
  • 2
    I think you can omit `html` from `html *` here – JonnyRaa Nov 13 '17 at 16:28
  • NOTE: if ur using ``-based icons, such as Google Icons, you're gonna have to add `.material-icons{ font-family: 'Material Icons' !important; }` – Ronnie Royston Apr 13 '18 at 22:36
  • This will break icon fonts like Fontawesome though. will stop working. – Shawn Aug 19 '20 at 00:17
57

Best practice I think is to set the font to the body:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

and if you decide to change it for some element it could be easily overwrited:

h2, h3 {
    font-size: 14px;
}
Teneff
  • 30,564
  • 13
  • 72
  • 103
  • 1
    if you are using a framework like foundation css this does not work without adding !important. – Petros Kyriakou Oct 24 '15 at 18:40
  • I agree, and think the accepted answer is an abomination, although I accept that it answers the actual question of 'ignoring all inner formatting'. See [my answer](https://stackoverflow.com/a/68249715/2652785) on a [related question](https://stackoverflow.com/questions/42925682/where-to-set-font-family-body-or-html-element) as to *why* setting font properties on `body` is best practice. – Kal Jul 05 '21 at 00:54
17

Set it in the body selector of your css. E.g.

body {
    font: 16px Arial, sans-serif;
}
venkatvb
  • 681
  • 1
  • 9
  • 24
Petecoop
  • 537
  • 5
  • 15
15

Use the following css:

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

The *-selector means any/all elements, but will obviously be on the bottom of the food chain when it comes to overriding more specific selectors.

Note that the !important-flag will render the font-style for * to be absolute, even if other selectors have been used to set the text (for example, the body or maybe a p).

karllindmark
  • 6,031
  • 1
  • 26
  • 41
  • 1
    Maybe `!important` would prevent other selectors from overriding the settings. – Quasdunk Aug 11 '11 at 12:25
  • 1
    Well, yes, `!important` would prevent other selectors from overriding, as long as they don't also use it. Heh. I'll edit my post and add it - thanks. :-) – karllindmark Aug 11 '11 at 12:28
  • Yep, that's right. Not quite sure, but I think the preference also depends on where you place the declaration. If you place it at the very bottom, I may also override the `!important`s from the more specific selectors above. But that's not quite the point here I guess :) – Quasdunk Aug 11 '11 at 12:32
  • 1
    This is the only answer that actually worked for me. Not sure why, but it did. – Peter Gordon Jun 22 '15 at 16:29
  • It only works for me if I use "font-family:", not "font:" – FloverOwe Sep 21 '21 at 23:23
3

Try this:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}
StuperUser
  • 10,555
  • 13
  • 78
  • 137
anglimasS
  • 1,304
  • 2
  • 16
  • 41
  • Hi anglimass, I formatted your code, if you use 4 spaces or the `{}` button you can display example code in this way in your answers. – StuperUser Aug 11 '11 at 12:28