Adding New Fonts

As part of the April 2023 release, we supplied 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 are now available without needing internet access.

If you need to add any additional fonts, you can do so using one of the two methods mentioned below.

Method 1 - Hosting Fonts In The Dashboard

Download & Convert

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. The downloaded files are typically output as .ttf format as standard.

Open

Not all modern day browsers support the .ttf format and so it is recommended to convert them one of many alternative file types using an online converter. Online @font-face generatorwill allow you to do this for free.

You can decide on which of the supported file types you will to convert the .ttf files to, based on your browser requirements - using the information found HERE.

Font Storage

Once you have downloaded the converted files to your desired format, 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”)

Adding The Font In The Settings

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

Open

To add a new font, click the add/plus button in the ‘Additional Fonts’ section (shown below)

Enter a font name (Label) that you wish this to be known as

Then add the Font Family, as shown below - this can be found in the .css file

When storing Fonts in the dashboard, the Custom Font URL should be a file location for the .css file in your new font directory (e.g. “new_font/stylesheet.css”).

Adding the ‘Font Family’ correctly should now present a preview of the selected font in the ‘Preview’ field.

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.

Method 2 - 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’.

Then copy the URL for the font (as highlighted in the following screenshot).

Next, paste the copied URL into the ‘Custom Font URL’ field.

Then copy the Font Family from the ‘CSS rules to specify families’ section (from the earlier screenshot)

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.

All you need to then do is add your own Label for the font into the ‘Label’ field and click the ‘Save’ icon.

Fonts With Multiple Styling Options

If your chosen font has multiple styling 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.