DriveWorks Pro 22

How To: Embed Non-Standard Fonts (KB16051701)

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 your projects are to be specified on.

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

This is particularly necessary 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 (Windows 7 or newer) 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.

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.

Non-Standard Fonts

Non-standard fonts need to be embedded in the .css used to display fonts.

If you are using DriveWorks Live, and have already customized the Skin (in line with the instructions given in the section Skin Customization in the topic Customize the Web Theme - Advanced), follow the instructions below from step 3.

If you are using DriveWorks Live without any customizations follow all the steps below:

1. Navigate to the DriveWorks Live Skins folder.

   This is located at: C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\system\skins

2. Copy the Skins folder.

   This should be copied to the location:

   C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom\skins

3. Navigate to the fonts folder.

   This is located at: C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\system

4. Copy the fonts folder.

   This should be copied to the location:

   C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom

5. Navigate to the .TTF file for your custom font.

   If the font is installed on your computer it can be found by:

   • Open Windows Control Panel
   • Select Appearance and Personalization
   • Fonts
6. Copy the .TTF font file.

   This should be copied to the location:

   C:\ProgramData\DriveWorks\[version number]\Live\Themes\Web\content\custom\fonts

7. Open the skin.fonts.css file from the Skins folder you copied in step 2 above.
   Use Notepad to edit the file.
8. Copy the following text into the top of the skin.fonts.css file and update it for your custom font:
   If the selected skin.font.css file begins with a comment (a line beginning with /*) place the text after the characters */
   skin.fonts.css

   @font-face {
       font-family: 'My Font Name';
       src: url('/content/custom/fonts/My-Font-File-Name.ttf');
       font-weight: 700;
       font-style: normal;
   }
                       

   • Replace My Font Name with the name of the font that was copied
   • If the font name does not contain any whitespace the surrounding quotes are not required
   • Replace My-Font-File-Name.ttf with the name of the Font that is to be embedded
   • Replace sans-serif with a font family name (serif, sans-serif etc.) to fallback to if there are any problems loading the embedded font
   • font-weight and font-style values should be set to your preference.
9. 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

   

10. 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.

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.