Author Topic: How to set default font? (Read 1022 times)

xavier · August 10, 2011, 06:23:34 am

Hi,

One of the first complain when using civicrm is that it's received as times new roman in outlook, and it looks really crap.

That's because it doesn't set any font style and therefore, let the client choose whatever. Seems that outlook go for times by default.

I would like to set a default, say a lovely comic sans, size 14.

I can put in the header a

Code: [Select]

<style>
* {font-family:"Comic Sans MS,Verdana",Helvetica,sans-serif;font-size:14px;}
</style>

Works with some versions of outlook, doesn't work in gmail for instance.

How do you solve that? Is there a way to put a style to any paragraph that hasn't one by default, or something?

X+

P.S. the question would be the same for any font type, in the odd chance your main target aren't 9 years old kids

klmyers · August 25, 2011, 02:06:12 pm

I don't have an answer for you that's specifically related to CiviMail, but I can answer it from an HTML e-mail developer's perspective.

As you've already experienced, the various e-mail clients out there render HTML code very differently. The only way I've found to come close to having the major e-mail clients (Outlook, Gmail, Yahoo, etc.) render your HTML e-mail the same way is to go for the lowest common denominator: Design your HTML for the "dumbest" of the e-mail clients. This means going back in time about five years and using inline CSS to control all styling and tables (yes, tables) to control heights, widths, columns, etc.

In my experience, the best way to control the fonts in an e-mail is to build your e-mail content within a table, defining the font characteristics within the <table> tag:

<table style="font-family:Comic Sans MS,Verdana,Helvetica,sans-serif;font-size:14px;">

All text within the table's cells will then display as 14-point Comic Sans, whether it's wrapped in <td>, <p>, <div>, <span>, etc.

You can always override that style for specific areas of text by inserting inline styling in that text's wrapping tag, such as:

<p style="font-family:Helvetica,sans-serif;font-size:24px;">Some text here.</p>

Here's a great site to help figure out what inline CSS tags you should and should not use in your HTML e-mails:

Guide to CSS support in email (campaignmonitor.com/css/)
This page lists common CSS elements and shows whether or not they are supported by various e-mail clients. Very handy!

CiviCRM Community Forums (archive)

News:

Author Topic: How to set default font? (Read 1022 times)

xavier

How to set default font?

klmyers

Re: How to set default font?