Is there a way in css to clear all font-family + font-size style declarations?

Viewed 27129

I have a page which is a cms/wysiwyg/ms word nightmare.

It pulls many paragraphs of text from a database, some of which have retained ms word's bizarre html tags - including font declarations!!! ahh!

In one sentence I can have things like:

<span style="font-family:Verdana">this is some</span>
<span style="font-family:arial">ugly text!</span>

I was wondering if there is a way of removing all font-family and font-size styles so they will adapt the master stylesheet css?

I'd prefer to not get into massive preg_replace conditions if I can avoid it. Thanks

3 Answers

CSS:

span {
    font-family: initial !important;
    font-size: initial !important;
}

Well, if you're getting inline styles in many places, I would add this to the body CSS

body {
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 16px !important;
 }

If you notice that all of the inline font styling are going on spans, you could target spans instead of the body.

I chose these two fonts because they are the "default" fonts for Windows and Mac/iOS. Of course you can choose your own font size. The only unfortunate part about this is if you want a different font and font size in other places you'll have to use more !importants.

You can use the !important rule for this. But you will have to explicitly define each element you want it to go on (or use the universal selector *)

http://jsfiddle.net/b8RKm/

* { font-family: Tahoma, sans-serif !important; }
Related