The October 2021 release will be supplied with 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 add them in the same area of the system by following the instructions listed below: , 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.
...
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. https://transfonter.org/will 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.
...
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
...
| Warning |
|---|
IMPORTANT: Please ensure you copy from the start of the first quotation mark to the end of the font type text e.g ‘Ephesis’, cursive. |
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’.
...
You will now need to Then copy the URL for the font (as highlighted in the following screenshot).
...
| Info |
|---|
| Warning |
IMPORTANT: Please ensure you copy the link from https to the end of the word swap. |
...
Paste the Next, paste the copied URL into the ‘Custom Font URL’ field.
...
Copy Then copy the Font Family from the ‘CSS rules to specify families’ section .
...
(from the earlier screenshot)
| Warning |
|---|
IMPORTANT: Please ensure you copy from the start of the first quotation mark to the end of the font type text e.g ‘Ephesis’, cursive. |
...
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 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.
...
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 fontsFonts
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’.
...
| Info |
|---|
When adding new fonts, we advise previewing the text in 12px and 14px before selecting a font. The dashboard mostly uses 14px font size and some of the available font options may not look as good in a larger font. |
New fonts will always appear at the bottom of the list of fonts. To sort them into order, click the ‘Sort Alphabetically’ icon.
...