Try changing
.courier {
font-family: courier;
}
to
* {
font-family: courier;
}
The reason is the same as what @koala_dev mentioned. The “.courier” makes it apply only to elements of the class “courier,” and from the code that you show none of your content is labeled with that class name, so the font is not being applied.
The * selector, however, will apply the CSS font-family rule to the text of all elements.
Note that CSS uses a specificity priority, and if you have any other CSS selectors that apply to the same elements, but with a more specific identifier than *, then any font-family specified in those CSS rules will override the general rule specified by the * selector.
Update (this is considered a bad idea in CSS, but may help)
If you can’t find what other CSS rule may be conflicting, then you can use the !important rule to override other rules (unless those other rules are also using it):
* { font-family: courier !important }
Warning
Using !important is considered bad practice, however, but is useful possibly in your case where the conflicting CSS rule seems to be lost and you just need something that works.
What !important does is interfere with CSS’s usual “cascading” rules for priority. As an example, the h2 element would have the font-family courier in the below exam, even though the usual result would be arial (because of the more specific selector). The more specific selector h2 is overridden by the less specific selector * because the * rule has the !important predicate applied to it.
* { font-family: courier !important }
h2 { font-family: arial }
For more info, please read this except and continue reading at the link that follows:
… postscripting your CSS values with !important can be highly abused and
make for messy and hard to maintain CSS. The unfortunate typical use
case goes like this:
- WHY IS MY FRAGGLE ROCKING CSS NOT WORKING?!?!
- (use !important rule)
- OK, now it’s working
Then the next guy comes along and tries to make new changes. He tries
to alter some existing CSS rules, but now his changes aren’t behaving
how they should. He traces the issue back to the !important rules,
then has a choice. He can try and remove those and attempt to get
things back on track, or add some more of his own to fight them and
get his change done. Since he might not know exactly why those
!important rules were added in the first place, he might opt for the
second option for fear of breaking something somewhere else on the
site he’s not aware of. And thus the vicious cycle starts.
Continue reading here: http://css-tricks.com/when-using-important-is-the-right-choice/