CODEWITHSUNDEEP
htmlcss
Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

Force font family unless header tag

TLDR: Using CSS is there a way to force all no header tags to use a specific font?

So I work for a school district and we are trying to unify our website look and feel. We have a small problem though, all of our teachers have access to change the font family and size of their content. We really don't mind when they do this with their headers or when they make their font slightly bigger for emphasis. The problem we are finding is that they are choosing outrageous hard to read fonts.

Now I know using !important with the * in css will force will force this across all fonts (Yes I am aware we really shouldn't use !important). However, this doesn't allow users to use custom fonts for headers (h1, h2, h3, h4, h5 and h6 tags). Is there a way that we can force the font family to be something specific without forcing it on the header tags.

Teachers are trained not to do this, but there is no way to punish or scold them if they do this. So training it out of the question. I am also one person who maintains stuff like this and it is only a fraction of my job and we have over 1000 teachers, so it is really hard for me to enforce.

So now you know my problem and why it is a problem. Any advice would be appreciated.

TLDR: Using CSS is there a way to force all no header tags to use a specific font?

Upvotes: 1

Views: 1362

Answers (2)

KyleS
KyleS

Reputation: 401

You can use :not. Heres a small example. You can see the Header tags are a different font family than the paragraph tag (added some coloring and such).

h1, h2, h3, h4, h5, h6{
  font-family: sans-serif;
  color: red;
}

*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
  font-family: Serif;
  color: blue;
}
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>

Upvotes: 3

sol
sol

Reputation: 22949

Use the :not pseudoclass

Set a default style, and then override it for the editable font...

* {
  font-family: sans-serif;
  font-style: normal;
  color: #000;
}

*:not(h1):not(h2):not(h3) {
  font-family: 'courier';
  font-style: italic;
  color: red;
}
<h1>Default font</h1>
<h2>Default font</h2>
<p>Changed font</p>
<h3>Default font</h3>

Upvotes: 1

Related Questions