Salesforce

Tips for Printable and Email Integrations - How to Use Fonts

« Go Back
Information
Tips for Printable and Email Integrations - How to Use Fonts
starting-tips-for-printable-and-email-integrations-how-to-use-fonts
Article Details

Firmstep has introduced a new PDF generator. This new generator is now web kit based.  This will mean the PDFs generated will more closely represent the source code when making a printable. This does mean, however, that the interface for printable integrations now has functionality which is deprecated.  This includes the list of fonts, from the drop down menu. Fonts can still be used via the @font-face method with a woff url for your font. 

For example:

 <style><!-- @font-face {     font-family: "verdana";     src: url("https://s3-eu-west-1.amazonaws.com/fs-filestore-eu/Fonts/Verdana.woff") format('woff'); } --></style>

A full list of currently provided fonts is below:

FontSource URL
Courierhttps://fs-filestore-eu.s3.amazonaws.com/Fonts/courier.woff
Helveticahttp://fs-filestore-eu.s3.amazonaws.com/Fonts/helvetica.woff
Verdanahttp://fs-filestore-eu.s3.amazonaws.com/Fonts/Verdana.woff
Aerialhttp://fs-filestore-eu.s3.amazonaws.com/Fonts/Arial.woff
Comic Sanshttps://fs-filestore-eu.s3-eu-west-1.amazonaws.com/Fonts/comic-sans-ms.woff
https://fs-filestore-eu.s3-eu-west-1.amazonaws.com/Fonts/comic-sans.woff

If you would like a font hosted for you, please raise a support ticket with the font .woff file attached.  


Styling Subforms

By default, subforms are unaffected by changes made to fonts and font sizes. To change this, you will need to target the .repeatable-table element.

Example:

 <style><!-- .repeatable-table {font-size: 5pt;} --></style>

Setting a Font Size

Setting a font size can easily be achieved by adding a div around your entire content.  For example if your source code was originally:

<p>Hello</p>

<p>Thank you for contacting us regarding {token}</p>

<p>Your reference number is:{reference}</p>

This could be amended to:

<div style="font-size: 20px;">

<p>Hello</p>

<p>Thank you for contacting us regarding {token}</p>

<p>Your reference number is:{reference}</p>

</div>

Inline styling can also be used for each line.  For example:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Inline styling is displayed immediately and will show in the editor.


Further useful reading: 



 

top of page


Powered by