Workflow and ServiceDesk Community

When designing the interface for your Workflow projects, you may decide to use something other than Arial font.  Using Google Fonts, you can use open source fonts with open license.  Here are some instructions on how to import and use these fonts in your projects.

Find the font that's right for your project, here:

https://fonts.google.com/

I'll choose Source Sans Pro.  Click the red PLUS icon.

This will show up at the bottom of the page:

Click the black space and the window will roll up and open:

At this point, the script shown above can be copied and pasted into a Merge Text component.

Then, using an IncludeHTML component, apply the html to the form:

This action will not change any font values you see when you directly edit the font in a component's "Style" section.  In order to leverage this import, open the Merge Text component again, and add a CSS section:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 

<style>

.cDemoLabel {
  color: #333333;
  font-family: "Source Sans Pro";
  font-size: 18px;
}

</style>

Then, we need a style to target.  Right-click any empty space on your form, and:

Click over to "Themes" and select "(Embedded Theme)", and click "Edit Selected Theme":

Add a custom style:

To match the CSS we've typed above, we'll name the custom style DemoLabel .

No adjustments need be made in the editor.  Just click OK until you're back at the form designer.

Add a Label component, and enter the text for the label.  Then, select the Theme Style "DemoLabel" we just created, and click OK.

Upon publishing/debugging, the label should be rendered with the CSS applied and the custom font we selected.

Additionally, if you want to include different font weights, select the "Customize" button on the Google Font rollup window:

Select the weights you want to make available in your project:

Then repeat the above step.  Click back to "Embed", and copy the new code out:

Edit the Merge Text component to reflect this new code, edit the CSS values (add a font-weight attribute) and republish/debug to see the change.

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet"> 

<style>

.cDemoLabel {
  color: #333333;
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: 600;
}

</style>

And the live font:

That's that!  I'll attach a demo project to help illustrate the process.

For additional instructions on including custom html in a web form, see here.