How to Apply global font to whole HTML document

html css font-family
Sweety picture Sweety · Aug 11, 2011 · Viewed 340.7k times · Source

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?

Answer

Amadiere picture Amadiere · Aug 11, 2011

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.

Related questions

Apply Calibri (Body) font to text

I have a div and in this div I want to display some text in Calibri (Body) font. How can I do this? This is the css I have been given : .an_account_join_1 { float:left; width:100%; color:#000000; font-family:Calibri (…

Read More
How can I set the font-family & font-size inside of a div?

This is my complete test html: <!DOCTYPE> <html> <head> <title>DIV Font</title> <style> .my_text { font-family: Arial, Helvetica, sans-serif font-size: 40px; font-weight: bold; } </style> </…

Read More
Wingdings font family does not seem to work on Firefox and Opera

I was using the Wingdings font in the CSS for some symbols like a pencil and a home icon. It worked on IE, Chrome and Safari but not in Firefox and Opera. I googled it but did not find any …

Read More