CODEWITHSUNDEEP
htmlcssfont-family
Ruchi
Ruchi

Reputation: 5192

How to Apply global font to whole HTML document

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?

Upvotes: 232

Views: 488827

Answers (7)

bobismijnnaam
bobismijnnaam

Reputation: 1505

One answer I have not seen here is to use :root:

<html>
<head>
<style>
/* html * {
  font-family: sans-serif;
} */
:root {
  font-family: sans-serif;
}
</style>
</head>
<body>
<pre>
  monospace
  <div>
  not monospace!
  </div>
  monospace
</pre>
</body>
</html>

https://jsfiddle.net/emt0b9kp/1/

Essentially, this sets a base value for all element types that do not define the property themselves. See also: :root, html, * selector. Any differences?

The benefit for my usecase here was that it leaves elements that have some preferred styling alone (in my case, I wanted to keep <pre> as monospaced). Using html * also set <pre> as sans-serif, which is not what I wanted.

Upvotes: 0

tinker
tinker

Reputation: 642

*:not(i, code, button, span, a) {
    font-family: SF Pro Text, monospace !important;
}

The currently accepted answer will break icon fonts like Fontawesome. Here we use the not operator to exclude some elements.

Upvotes: 2

Petecoop
Petecoop

Reputation: 557

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

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

Upvotes: 19

Amadiere
Amadiere

Reputation: 11416

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.

Upvotes: 343

karllindmark
karllindmark

Reputation: 6071

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

Upvotes: 17

anglimasS
anglimasS

Reputation: 1344

Try this:

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

Upvotes: 5

Teneff
Teneff

Reputation: 32148

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

Upvotes: 65

Related Questions