How to Apply global font to whole HTML document

Question

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?

Divestiture

Answer 1

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.

Miracle

+1 !important is useful, but it can get a bit "thar be monsters" if it gets overused. – Labellum

+1 for providing a great use of !important. It must always be used as last option. – Kev

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. – Loaiasis

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. – Knead

I think you can omit html from html * here – Godown

NOTE: if ur using <i>-based icons, such as Google Icons, you're gonna have to add .material-icons{ font-family: 'Material Icons' !important; } – Deportment

This will break icon fonts like Fontawesome though. <i class="fa fa-circle"></i> will stop working. – Outcross

Answer 2

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;
}

Ancient

if you are using a framework like foundation css this does not work without adding !important. – Fetich

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 on a related question as to why setting font properties on body is best practice. – Choir

Answer 3

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

body {
    font: 16px Arial, sans-serif;
}

Bentinck

This can be overridden with more specific selectors. – Labellum

It wouldn't apply to all element, for example: input type='button' – Fulcher

Answer 4

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).

Turpitude

Maybe !important would prevent other selectors from overriding the settings. – Exodontics

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. :-) – Turpitude

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 !importants from the more specific selectors above. But that's not quite the point here I guess :) – Exodontics

This is the only answer that actually worked for me. Not sure why, but it did. – Thant

It only works for me if I use "font-family:", not "font:" – Crape

Answer 5

Try this:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

Mauer

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. – Labellum