Adding New Fonts

The April 2023 release will be supplied with a number of pre-loaded fonts hosted in the dashboard - you’ll be able to see these in Dashboard Configuration>Settings>General Settings-> System Fonts. These will now be available without internet access. If you need to add any additional fonts you can add them to the additional fonts table in the same area of the system by following the instructions listed below:

It is now possible to add fonts to your dashboard in two ways:

• Using a web URL to access the font online.

• Hosting fonts in the dashboard so they can be accessed offline.

To add a new font, click the add button in the ‘Additional Fonts’ section.

Adding a font using a web URL

To add a new font, you will need to specify the Font Family and Font URL. The instructions below show how to add a font from Google fonts.

In Google Fonts, select the font that you want to use by clicking on it and then click ‘Select the style’.

You will now need to copy the URL for the font (highlighted in the following screenshot).

Paste the URL into the ‘Custom Font URL’ field.

Copy the Font Family from the ‘CSS rules to specify families’ section.

Paste this into the ‘Font Family’ field. If you’ve copied the details correctly, you should see a preview of the selected font in the ‘Preview’ field.

Add a Label for the font into the ‘Label’ field and click the ‘Save’ icon.

If your chosen font has multiple options, ensure that you click ‘Select this style’ for all options if you want to be able to use Bold and Italic styles for example.

In the following screenshot, the chosen font has regular, italic, bold and bold italic versions.

Fonts:

• Fonts added to the Settings screen are globally available and are also available for use with text editing

• Fonts defined in themes (previous implementation), which were used to allow a particular theme to have additional fonts is now unnecessary

• Generally it’s advisable to provide a fall back font when providing a font. When Internet access is not available, the fall back font will then be used

Fall back fonts

To ensure that you have a fall back font specified, please ensure that you copy everything in the ‘CSS rules to specify families’ section when choosing a new font. This information is then copied into the ‘Font Family’ column in Dashboard Configuration> Settings. In the following example, if the font ‘Ephesis’ was not available due to a lack of internet connection, cursive would be used in it’s place. In the following screenshot, we can see that when adding the ‘Ephesis’ font we’ve selected everything from the starting single quote to the end of the text ‘cursive’.

We can see how this looks in Dashboard Configuration>Settings in the following screenshot. The main font is specified in double quotes e.g. “Ephesis” and anything after the comma is the fall back font e.g. cursive.

New fonts will always appear at the bottom of the list of fonts. To sort them into order, click the ‘Sort Alphabetically’ icon.

Hosting a font in the dashboard

When choosing to host a font in the dashboard you will need to download, convert and save the necessary files as part of your dashboard installation for the dashboard to be able to access and use them.

In Google Fonts select the font you would like and then click “Download family” to download the files required to use the font.

The files will be downloaded in .ttf format as standard. This file type is not supported by some modern browsers, and so it is recommended to convert them to a number of supported file types using an online converter. https://transfonter.org/will allow you to do this for free.

Once you have downloaded the converted files, unzip the file contents and store them in a suitably named folder in the “fonts” folder of your dashboard: (e.g. “/Dashboard/tomcat/webapps/panMISDashboardResources/fonts/your_new_font”)

To add the font into the dashboard. Go to the Additional Fonts section in Dashboard Configuration>Settings>General Settings. and click the add button.

Enter the font name and font family into the table (see above for guidance on adding the font-family and fallback font).

The Custom Font URL should be a file location of the .css file in your new font directory (e.g. “new_font/stylesheet.css”).

Clicking the save button in the general settings screen should add your new font to the table and the Preview field should show the preview text in your chosen font.

New fonts will be added to the bottom of the table as standard, but can be re-ordered to be displayed alphabetically using the ordering button in the top right of the table.