How To: Embed Non-Standard Fonts (KB16051701) (DriveWorks Documentation)

How To: Embed Non-Standard Fonts

When designing user forms in DriveWorks Administrator it is important to use fonts that are available on all machines the projects will be specified from.

Many applications install fonts by default, so what is available on one machine may not be available on others.

This is particularly important when using DriveWorks Live, where many device types and operating systems are used.

Standard Fonts

The table below lists the most commonly used fonts available on Windows operating systems.

Using any of these fonts will ensure your forms display correctly when specifying on any machine with a DriveWorks client module (Administrator, User or Autopilot).

When using any other font, please make sure it is installed on each machine using the project.

Arial	Georgia	Sitka Banner
Calibri	Impact	Sitka Display
Cambria	Lucida Console	Sitka Heading
Cambria Math Regular	Lucida Sans Unicode	Sitka Small
Candara	Microsoft Sans Serif	Sitka Subheading
Comic Sans MS	Palatino Linotype	Sitka Text
Consolas Regular	Segoe MDL2 Assets	Tahoma
Constantia	Segoe Print	Times New Roman
Corbel	Segoe Script	Trebuchet MS
Courier New	Segoe UI	Verdana
Franklin Gothic	Segoe UI Emoji	Webdings
Gabriola	Segoe UI Symbol	Wingdings

However, when using DriveWorks Live your projects can be specified on any type of device or operating system. These may not have the same fonts installed.

When a browser loads a DriveWorks form it will try and find the font used on the clients machine or device. If the font is not found it will fallback to the default font declared in the .css for the page being loaded.

The .css will list the fallback font in order of preference, usually ending with a font-family name that all browsers are aware of.

The only way to ensure a non-standard font is displayed correctly is to embed the font into the .css (see Non-Standard Fonts below).

The table below lists fonts that are standard to Windows and Mac systems along with the fallback font-family name used for other devices.

Windows	(Mac) OS X	font-family
Arial	Arial	sans-serif
Courier New	Courier New	monospace
Georgia	Georgia	serif
Palatino Linotype	Palatino	serif
Times New Roman	Times New Roman	serif
Trebuchet MS	Trebuchet MS	sans-serif
Verdana	Verdana	sans-serif

Non-Standard Fonts

Non-Standard fonts need to be embedded in order for them to be displayed in a browser.

The steps required differ slightly between the DriveWorks Live Theme being used.

Integration Theme
Web Theme

Integration Theme

For custom fonts that require physical font files stored on the server:

Copy the custom font file(s) to the location the Integration Theme files are served from.
This could be:
- C:\ProgramData\DriveWorks\[Version]\Live\Themes\Integration
  Or
- The directory from which additional static files are to be served (if this has been set in the DriveWorksConfigUser.xml file).
  See staticFilesPath for more information.
Apply the custom font declaration in the web page where the Integration Theme has been embedded.
This is typically done in the index.html page. But could be in any other .html page your website uses.
- ```
<head>
    ...
    
	<style>
		@font-face {
		    font-family: sans-serif;
 		   	src: url('http://integration.theme.com/Custom-Font.ttf');
		    font-style: normal;
		}
	</style>
</head>
<body>
  ...
  <script src="http://integration.theme.com/DriveWorksLiveIntegrationClient.js"></script>
</body>                          
                        
```
  - Replace sans-serif with a font family name (serif, sans-serif etc.) to fallback to if there are any problems loading the embedded font
  - Replace Custom-Font.ttf with the name of the Font that is to be embedded
  - The font-style value should be set to your preference.

For web fonts provided by a font delivery service (for example https://fonts.google.com/).

Apply the web font declaration in the web page where the Integration Theme has been embedded.

This is typically done in the index.html page. But could be in any other .html page your website uses.

<head>
    ...
	<style>
		...
	</style>

    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

</head>
<body>
  ...
  <script src="http://integration.theme.com/DriveWorksLiveIntegrationClient.js"></script>
</body>

Web Theme

If using the Web Theme and no customizations have been made follow all the steps below.

If the Web Theme has been customized (in line with the instructions given in Skin Customization), follow the instructions below from step 3.

Navigate to the DriveWorks Live Skins folder.
This is located at: C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\system\skins
Copy the Skins folder to the location:
C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom\skins
Navigate to the fonts folder.
This is located at: C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\system
Copy the fonts folder to the location:
C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom
Copy the .TTF file for the custom font to the location:
C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom\fonts
Open the skin.fonts.css file, from the Skins folder (copied in step 2 above), in a text editor.
Copy the following text into the top of this file and update it for your custom font:
```
@font-face {
    font-family: 'sans-serif';
    src: url('/content/custom/fonts/My-Font-File-Name.ttf');
    font-weight: 700;
    font-style: normal;
}
```
- Replace sans-serif with a font family name (serif, sans-serif etc.) to fallback to if there are any problems loading the embedded font
- Replace My-Font-File-Name.ttf with the name of the Font that is to be embedded
- font-weight and font-style values should be set to your preference.
Add the Font Name value to all font-family attributes in the skin.font.css file.
For example the skin.font.css file may contain the line:
font-family: 'Open Sans';
Add the Font Name immediately after font-family: so it looks like:
font-family: 'roboto light', 'Open Sans';
The skin.font.css should look like the image below
Save your changes and test out your new embedded font.
Test on a computer or device that doesn’t have the embedded font installed.

Troubleshooting

If your embedded font doesn’t display, use the developer tools in your browser to inspect what font name the browser is expecting. You can then amend your font.skins.css file.

Developer Tools are available by clicking the following:

IE - F12 key
Chrome - F12 key
Opera - ctrl + shift + I keys
Firefox - ctrl + shift + I keys

When running DriveWorks Live through IIS, recycle the Application Pool to ensure that any cached files are removed and the new embedded font is displayed.

Knowledge Base Article Ref:	KB16051701

DriveWorks Pro 23 How To: Embed Non-Standard Fonts (KB16051701)