Change Font Family

Sometimes Times New Roman or Arial just don’t cut it. Copy and paste the CSS below to customize the font selection on your forms.

Unsure how to add custom CSS to your Form Template? Click ‘How to add custom CSS to a Form Template’below and follow the steps to add the necessary fields to your template override page.
/*Import the font into the CSS*/
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
/*Apply the font family to the document body*/
body {
  font-family: 'Indie Flower', cursive;
}
/* Apply the font family to the form container */
.slds-scope {
  font-family: 'Indie Flower', cursive;
}
/*Apply the font for the headings, table and titles */
.slds-scope h1,
.slds-scope h2,
.slds-scope h3,
.slds-scope h4,
.slds-scope h5,
.slds-scope h6,
.slds-scope th,
.slds-scope td {
  font-family: 'Indie Flower', cursive;
}
/*Apply the font family to the form fields*/
.containerBox input[type=text],
[type=number],
[type=date],
[type=datetime-local],
[type=url],
[type=phone],
[type=email] {
  font-family: 'Indie Flower', cursive;
}

Add Custom CSS to a Form Template

Follow these steps to add custom styling to your form template:

  1. Navigate to the Form Template Object listed in your Custom Objects. Follow this click path – Setup > Create > Objects > Form TemplateForm Template Object.jpg
  2. Scroll down to the Page Layouts list. Under Page Layouts, edit the Form Template Layout (click Edit)Page Layout List.jpg
  3. Drag and drop the ‘CSS CompleteForm’ and ‘CSS FormDetail’ fields into the Information Section and then click Save:Drag and Drop CSS.jpg
  4. Back on the Form Template Object page, add a New Custom Field under Custom Fields and Relationships:New Custom Field.jpg
  5. For Field Type, select Formula:Formula Field.jpg
  6. In Step 2, label the field ‘Standard Edit Page’ and set the Output Type to Text:Step 2.jpg
  7. In Step 3, enter the Advanced Formula (copy & paste):
    “HYPERLINK('/'& Id &'/e?nooverride=1','Click to edit')”Step 3.jpg
  8. Click Next until the final step where you Save the New Custom Field.
  9. Navigate to the Form Templates Tab to display your list of Templates. Next, to View at the top of the page, click Edit: Edit Form Template.jpg
  10. 10. Under ‘Select Fields to Display’ add the Standard Edit Page field you just created to the Selected Fields list. Click Save when complete:Add Fields.jpg
  11. You will now see the Standard Edit Page field on the Form Template List View:List.jpg
  12. Now, when users click the new Standard Edit Page hyperlink, they will be able to edit the CSS fields on the Form Template. After Save, the CSS updates will be applied to all Forms for that Template. The CSS should be entered in the CSS CompleteForm and CSS FormDetail fields as it would appear in an external CSS file, it should NOT include a

We use cookies to ensure that we give you the best experience on our website.
If you continue to use this site we will assume that you are happy with it.