how to overide rich text content html font family using CSS?

Question

we have a VFP to render our customer data in PDF and since Salesforce PDF rendering engine only support Arial Unicode MS for multi-byte characters and our users used to copy their content from MS word and paste into the rich text field and it will have the style like:-

<span style="font-family: simsun;"> chinese words </span>

i would like to force change all font-family enter by our user in rich text field to Arial Unicode MS so it can display in PDF

i tried something like that:

.sfdc_richtext{
  font-family:"Arial Unicode MS" !important;
  font-size:10px;      
}

<div class="sfdc_richtext">
   <apex:outputText value="{!account.test_rich_text__c}" escape="true" />
</div>

i even tried inline style:

<div >
   <apex:outputText style="font-family:Arial Unicode MS; !important;" value="{!account.test_rich_text__c}" escape="true" />
</div>

but it still doesnt show the rich text content. Any thought?

Answer 1

You should be able to override the styles with one of two methods:

The First Method

Create an !important generic rule for all elements contained within your rich text, like so:

.sfdc_richtext * {
  font-family:"Arial Unicode MS" !important;
  font-size:10px;      
}

Notice the space and asterisk that I added to your original rule. This applies the "important" rule directly to all child elements. Without the space/asterisk, you were still allowing the child span to override the inherited font from .sfdc_richtext with it's own inline style (because of the greater CSS specificity rule).

If that does not work for you (or you have some inline !important rules for some ungodly reason) try...

The Second Method

You can get a little better specificity with the following.

.sfdc_richtext span[style] {
  font-family:"Arial Unicode MS" !important;
  font-size:10px;      
}

This second method should override the inline styles, like whoa, in all span elements within your .sfdc_richtext control, even if they are inline !important. This overrides the inline style attribute entirely.

Disclaimer: I haven't seen your DOM or your other CSS and I don't know what browsers you're trying to support, so let me know if this doesn't work and I'll revise.

Epilogue

I suppose you could replace the span with an asterisk (*) in the second method and make the rule a bit more broad, but my guess is that it would drop the specificity and might not work. I don't know... I've never needed to try that before.