+ Start a Discussion
MC34MC34 

Inline CSS font-type for email templates?

Hi

I would like to give font-type Source Sans Pro for the entire html email template. How can I give inline css code in the following html template to achieve this?
 
<html style="overflow-y:hidden">
<head>
<title></title>
</head>
<body style="height:auto;min-height:auto">
<span style="font-size:30px"><b>Confirmation</b></span></br>
<span style="color:#f39c12"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___________________</b></span></span>
<br /><br />
Thank you! We have successfully received your response<br />
and it is being processed.<br />
<br />
Your proof have been approved for PO#&nbsp;{!Clarification_Question__c.PO_Number__c}/SO#&nbsp;{!Clarification_Question__c.SO_Number__c}</br></br>
PO Number: {!Clarification_Question__c.PO_Number__c}</br>
Order Number: {!Clarification_Question__c.EBS_Order_Number__c}<br />
Approver First Name: {!Clarification_Question__c.Authorization_First_Name__c}</br>
Approver Last Name: {!Clarification_Question__c.Authorization_Last_Name__c}</br>
Company Name: {!Clarification_Question__c.Authorization_Organization__c}</br></br></span>
Now your order has moved straight into production, and you can keep tracking it right on our website! It’s quick</br> and easy when you<a href = "https://www.mackpro.com/US/login"> login</a> to your account or <a href = "https://www.mackpro.com/US/login">create a login</a> at <a href = "https://www.mackpro.com/US">mackpro.com</a>.</br></br>
All the Best,</br>
The Mackpro Customer Care Team

Thank you, 

Mit
Soundar Raj PonpandiSoundar Raj Ponpandi
HI Fincher,


Please save following css in static resource and call into your vf page like below.
font.css
@font-face {
        font-family: "Source sans Pro";
}
<apex:stylesheet value="{!$font.css}"/>

Note: Save in static resource 

1. Click Setup 

2. Search Static resource

3. Click New

4. Upload your Css file (with CSS format).

5. Save (in public).

Your Code Will be like that.
 
<html style="overflow-y:hidden">
   <head>
      <title></title>
   </head>
   <!-- Call Here -->
   <apex:stylesheet value="{!$font.css}"/>

   <body style="height:auto;min-height:auto">
      <span style="font-size:30px"><b>Confirmation</b></span></br>
      <span style="color:#f39c12"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;___________________</b></span></span>
      <br /><br />
      Thank you! We have successfully received your response<br />
      and it is being processed.<br />
      <br />
      Your proof have been approved for PO#&nbsp;{!Clarification_Question__c.PO_Number__c}/SO#&nbsp;{!Clarification_Question__c.SO_Number__c}</br></br>
      PO Number: {!Clarification_Question__c.PO_Number__c}</br>
      Order Number: {!Clarification_Question__c.EBS_Order_Number__c}<br />
      Approver First Name: {!Clarification_Question__c.Authorization_First_Name__c}</br>
      Approver Last Name: {!Clarification_Question__c.Authorization_Last_Name__c}</br>
      Company Name: {!Clarification_Question__c.Authorization_Organization__c}</br></br></span>
      Now your order has moved straight into production, and you can keep tracking it right on our website! It’s quick</br> and easy when you<a href = "https://www.mackpro.com/US/login"> login</a> to your account or <a href = "https://www.mackpro.com/US/login">create a login</a> at <a href = "https://www.mackpro.com/US">mackpro.com</a>.</br></br>
      All the Best,</br>
      The Mackpro Customer Care Team

PLease mark this one as best answer.

Regards,
Soundar.