Change font

Hi

I have the code open and I want to change the font used as a title for each story, at the moment the code reads:
     
         td.sideHeader h3 {
         font-family: Georgia, serif;
         font-size: 18px;
         font-weight: bold;
         color: #ffffff;
         margin: 0;
         padding: 0;

If I change the font size the correct piece of text changes size, but when I change Georgia to Verdana, nothing happens.

Any help is much appreciated

Regards

roshodgekiss roshodgekiss, 5 years ago

Hi gmedia, is there any chance you can post your full code here, or send it on to our support team? My first guess is that there's a class or inline style somewhere in your code that's overriding your font-family property.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
gmedia, 5 years ago

Hi please see below the whole code

I have figured out a way to change the font, but it's probably not the most efficient way, on Dreamweaver in an area called 'Properties' I have been able to change the font, but as I say it's probably not the 'correct' way. When I do highlight this copy to change the font, within the 'properties' tab it has a box called 'Format' and there's a list in here which read 'Heading 1, Heading 2 etc...', whether I should be changing the Format settings I'm not sure?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template 1 - Right Sidebar</title>
<style type="text/css" media="screen">
body {
    background-color: #e6e6e6;
    background-image: url('bg.jpg');
    background-position: top center;
    background-repeat: no-repeat repeat-y;
    margin: 0;
    padding: 0;
}
a img {
    border: none;
}
table.main {
    background-color: #ffffff;
}
td.permission {
    padding: 10px 0 10px 0;
}
td.permission p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    padding: 0;
}
td.permission p a {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
}
td.header {
    background-color: #4babc5;
    padding: 0 0 2px 0;
}
td.header h1 {
    font-family: 'Gill Sans', 'Arial Black', sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 0 10px;
    padding: 0;
    display: inline;
}
td.date {
    padding: 8px 0 8px 0;
}
td.date p {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #666666;
    margin: 0;
    padding: 0;
}
td.sidebar ul {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    margin: 10px 0 10px 24px;
    padding: 0;
}
td.sidebar ul li a {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}
td.sidebar p {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #4c4c4c;
    margin: 10px 0 0 0;
    padding: 0;
}
td.sidebar p a {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #6cb9ce;
}
td.sidebar h4 {
    font-family: Georgia;
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    margin: 14px 0 0 0;
    padding: 0;
}
td.sideHeader h3 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
td.sideTitle h3 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
td.mainbar h2 {
    font-family: Georgia;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
}
td.mainbar h2 a {
    font-family: Georgia;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}
td.mainbar p {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #4c4c4c;
    margin: 10px 0 0 0;
    padding: 0;
}
td.mainbar p.more {
    padding: 0 0 10px 0;
}
td.mainbar p a {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #6cb9ce;
}
td.mainbar p img {
    border-bottom: 4px solid #edc913;
}
td.mainbar ul {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #4c4c4c;
    margin: 10px 0 10px 0;
    padding: 0;
    list-style-position: inside;
}
td.footer {
    padding: 10px 0 10px 0;
}
td.footer p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="10" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="580" border="0" cellspacing="0" cellpadding="0" class="main">
        <tr>
          <td width="580" align="center" class="permission"><p>You're receiving this newsletter from The National Skills Academy for Environmental Technologies</p>
            <p>Having trouble reading this email?
              <webversion>View it on your browser</webversion>
              . </p></td>
        </tr>
        <tr>
          <td height="90" valign="bottom" align="left" class=""><img src="header.gif" width="580" height="90" alt="ABC Widgets" /></td>
        </tr>
        <tr>
          <td align="center"><table width="550" cellspacing="0" cellpadding="0">
              <tr>
                <td class="date" width="330"><p>
                    <$currentdayname$>
                    <$currentday$>
                    <$currentmonthname$>
                 </p></td>
                <td></td>
                <td width="192">&nbsp;</td>
              </tr>
              <tr align="left" rowspan="3" valign="top">
                <td width="330" valign="top" class="mainbar" align="left"><repeater toc='true'>
                    <table cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                      <tr>
                        <td><h2><font face="Verdana">
                            <$title link='true' 
                          default='Enter your title'$>
                         </font></h2></td>
                      </tr>
                    </table>
                    <p><img src="&lt;$imagesrc link='true'$&gt;" alt="Alt" width="127" height="164" /></p>
                    <$description default='&lt;p&gt;Enter your description&lt;/p&gt;'$>
                    <img src="hr.gif" width="329" height="27" /> </repeater></td>
                <td width="28"></td>
                <td width="192" valign="top" class="sidebar" align="left"><table width="100%" cellspacing="0" cellpadding="4" bgcolor="##0080FF">
                    <tr>
                      <td bgcolor="#AAA17D" class="sideHeader"><h3><font face="Verdana">In this issue</font></h3></td>
                    </tr>
                    <tr>
                      <td><ul>
                          <tableofcontents>
                            <li>
                              <$repeatertitle$>
                            </li>
                          </tableofcontents>
                        </ul></td>
                    </tr>
                  </table>
                  <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3><font color="#FFFFFF" face="Verdana">In other news</font></h3></td>
                    </tr>
                  </table>
                  <repeater>
                    <h4><font face="Verdana">
                      <$title link='true' default='Enter 
                    your title'$>
                    </font></h4>
                    <$description default='&lt;p&gt;Enter your description&lt;/p&gt;'$>
                    <img src="smallhr.gif" width="190" height="19" /> </repeater>
                  <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3><font face="Verdana">Forward to a friend</font></h3></td>
                    </tr>
                  </table>
                  <p>Know someone who might be interested in the email? Why not
                    <forwardtoafriend>forward this email</forwardtoafriend>
                    to them.</p>
                  <img src="smallhr.gif" width="190" height="19" /> <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3><font face="Verdana">Unsubscribe</font></h3></td>
                    </tr>
                  </table>
                  <p>Don't want to receive these emails any more. Please
                    <unsubscribe>unsubscribe instantly</unsubscribe>
                    .</p>
                  <img src="smallhr.gif" width="190" height="19" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td align="center" class="footer"><p>Founding Sponsors: <br />
              Briggs &amp; Forrester Group Ltd, Cleaner Air Solutions UK Ltd, DPL 
              Energy, Environmental Skills Network,<br />
              M&amp;E Maintenance Solutions Ltd, Microgeneration Ltd, Nu-Heat UK Ltd, 
              Smith &amp; Byford Ltd, <br />
              Stella Maintenance Technologies Ltd, The Low Carbon Energy Company, 
              Trade Training Associates (NE) Ltd, <br />
              Yorkshire Solar, Zero Carbon Hub</p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi gmedia, I see what's amiss here. You have font tags surrounding multiple headings, which also have CSS classes applied to them. Both are declaring that different fonts be used, which undoubtedly is causing some conflict. For example:

td.sideTitle h3 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

Then later in the code:

<td class="sideTitle"><h3><font color="#FFFFFF" face="Verdana">In other news</font></h3></td>

This is an easy mistake to have made, especially when you've got lots of CSS. For future reference, my advice is to:
- Not use font tags in your code
- Use Clean CSS to strip out as much redundant CSS as possible

Also be mindful of preserving our template tags when copying and pasting code into Dreamweaver. For example, I saw a few cases of:

<img src="&lt;$imagesrc link='true'$&gt;" ... >

This could potentially cause issues when imported into the editor. Anyway, I did a quick code cleanup for you, so hopefully this will be easier to manage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Template 1 - Right Sidebar</title>
<style type="text/css" media="screen">
body {
    background-color:#e6e6e6;
    background-image:url('bg.jpg');
    background-position:top center;
    background-repeat:no-repeat repeat-y;
    margin:0;
    padding:0;
}
a img {
    border:none;
}

h2 { font-family: Verdana, Geneva, sans-serif; }

table.main {
    background-color:#fff;
}
td.permission p a {
    font-family:Arial;
    font-size:11px;
    font-weight:400;
    color:#333;
}
td.header {
    background-color:#4babc5;
    padding:0 0 2px;
}
td.header h1 {
    font-family:'Gill Sans', 'Arial Black', sans-serif;
    font-size:35px;
    font-weight:700;
    color:#fff;
    display:inline;
    margin:0 0 0 10px;
    padding:0;
}
td.date {
    padding:8px 0;
}
td.date p {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#666;
    margin:0;
    padding:0;
}
td.sidebar ul {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#000;
    margin:10px 0 10px 24px;
    padding:0;
}
td.sidebar ul li a {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#000;
    text-decoration:none;
}
td.sidebar h4 {
    font-family:Georgia;
    font-size:13px;
    font-weight:700;
    color:#333;
    margin:14px 0 0;
    padding:0;
}
td.mainbar h2 {
    font-family:Georgia;
    font-size:18px;
    font-weight:700;
    color:#fff;
    margin:0;
    padding:0;
}
td.mainbar h2 a {
    font-family:Georgia;
    font-size:18px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
}
td.mainbar p.more {
    padding:0 0 10px;
}
td.mainbar p img {
    border-bottom:4px solid #edc913;
}
td.mainbar ul {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#4c4c4c;
    list-style-position:inside;
    margin:10px 0;
    padding:0;
}
td.permission, td.footer {
    padding:10px 0;
}
td.permission p, td.footer p {
    font-family:Arial;
    font-size:11px;
    font-weight:400;
    color:#333;
    margin:0;
    padding:0;
}
td.sidebar p, td.mainbar p {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#4c4c4c;
    margin:10px 0 0;
    padding:0;
}
td.sidebar p a, td.mainbar p a {
    font-family:Arial;
    font-size:12px;
    font-weight:400;
    color:#6cb9ce;
}
td.sideHeader h3, td.sideTitle h3 {
    font-family: Verdana, Geneva, sans-serif;
    font-size:18px;
    font-weight:700;
    color:#fff;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="10" cellpadding="0">
  <tr>
    <td align="center" valign="top"><table width="580" border="0" cellspacing="0" cellpadding="0" class="main">
        <tr>
          <td width="580" align="center" class="permission"><p>You're receiving this newsletter from The National Skills Academy for Environmental Technologies</p>
            <p>Having trouble reading this email?
              <webversion>View it on your browser</webversion>.</p></td>
        </tr>
        <tr>
          <td height="90" valign="bottom" align="left" class=""><img src="header.gif" width="580" height="90" alt="ABC Widgets" /></td>
        </tr>
        <tr>
          <td align="center"><table width="550" cellspacing="0" cellpadding="0">
              <tr>
                <td class="date" width="330"><p>
                    <$currentdayname$>
                    <$currentday$>
                    <$currentmonthname$>
                  </p></td>
                <td></td>
                <td width="192">&nbsp;</td>
              </tr>
              <tr align="left" rowspan="3" valign="top">
                <td width="330" valign="top" class="mainbar" align="left"><repeater toc='true'>
                    <table cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                      <tr>
                        <td><h2><$title link='true' default='Enter your title'$></h2></td>
                      </tr>
                    </table>
                    <p><img src="<$imagesrc link='true'$>" alt="Alt" width="127" height="164" /></p>
                    <$description default='Enter your description'$>
                    <img src="hr.gif" width="329" height="27" /> </repeater></td>
                <td width="28"></td>
                <td width="192" valign="top" class="sidebar" align="left"><table width="100%" cellspacing="0" cellpadding="4" bgcolor="##0080FF">
                    <tr>
                      <td bgcolor="#AAA17D" class="sideHeader"><h3>In this issue</h3></td>
                    </tr>
                    <tr>
                      <td><ul>
                          <tableofcontents>
                            <li>
                              <$repeatertitle$>
                            </li>
                          </tableofcontents>
                        </ul></td>
                    </tr>
                  </table>
                  <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3>In other news</h3></td>
                    </tr>
                  </table>
                  <repeater>
                    <h4>
                      <$title link='true' default='Enter your title'$>
                      </h4>
                    <$description default='Enter your description'$>
                    <img src="smallhr.gif" width="190" height="19" /> </repeater>
                  <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3>Forward to a friend</h3></td>
                    </tr>
                  </table>
                  <p>Know someone who might be interested in the email? Why not
                    <forwardtoafriend>forward this email</forwardtoafriend>
                    to them.</p>
                  <img src="smallhr.gif" width="190" height="19" /> <img src="smallspacer.gif" width="192" height="25" />
                  <table width="100%" cellspacing="0" cellpadding="4" bgcolor="#FF4D00">
                    <tr>
                      <td class="sideTitle"><h3>Unsubscribe</h3></td>
                    </tr>
                  </table>
                  <p>Don't want to receive these emails any more. Please
                    <unsubscribe>unsubscribe instantly</unsubscribe>.</p>
                  <img src="smallhr.gif" width="190" height="19" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td align="center" class="footer"><p>Founding Sponsors: <br />
              Briggs &amp; Forrester Group Ltd, Cleaner Air Solutions UK Ltd, DPL 
              Energy, Environmental Skills Network,<br />
              M&amp;E Maintenance Solutions Ltd, Microgeneration Ltd, Nu-Heat UK Ltd, 
              Smith &amp; Byford Ltd, <br />
              Stella Maintenance Technologies Ltd, The Low Carbon Energy Company, 
              Trade Training Associates (NE) Ltd, <br />
              Yorkshire Solar, Zero Carbon Hub</p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Cheers, gmedia! Give us a holler if you have any questions - I hope this helps :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098