Google provides a wide range of fonts that can be embedded onto other sites.
In Claromentis these can be forced as the overall system font (explained here) or added in CK Editor to appear for selection when creating content in News, Knowledge Base, Blog, and Pages (text components)
There are hardcoded font selections that appear in CK Editor, but if you would like more variety, consider embedding fonts from Google:
Please note: Adding too many web fonts can increase load time and decrease system performance, so choose only the most important to add.
Example video of Steps
Here is a video showing all the steps performed below to add two Google fonts (Poppins and Montserrat) to CK Editor so they appear for use in content creation:
Fonts can be added one at a time or in multiples.
You can always add more by using the provided code and simply updating it to include other fonts over time.
As long as you follow the correct formatting for each entry, they will be added successfully.
Written steps
1. Head to the Google Fonts website.
2. Click on each font you wish to add and select Get font so they are added to the basket.
3. In the basket, click Get embed code:
4. Include all variants (the code will not work if certain options are deselected)
This ensures the system applies the font correctly when made Bold and Italic.
5. Click Copy code from the 'Embed code in the <head> of your HTML section:
6. On your site, head to Admin > System > Design and paste the code into the 'Custom code' field in the 'Advanced' tab of either the Master Design or each theme.
To force the font to appear as the system font in every theme, copy & paste the code into the 'Custom code' field in the 'Advanced' section of the Master Design. Make sure that ALL themes have this attribute linked to the Master, otherwise they will not have the code attributed to them.
If the font should only appear as the system font in certain themes, copy and paste the code into the 'Advanced' tab of only those themes.
7. Next, the configuration file of CK Editor needs to be updated with a different code to ensure the fonts work as expected.
The red parts below can be edited to represent the fonts you are adding:
var existingFonts = config.font_names
// Define your custom fonts
var customFonts = 'Poppins/Poppins, sans serif;' + 'Montserrat/Montserrat, sans serif;'
// Append custom fonts to the existing fonts
var updatedFonts = existingFonts + (existingFonts ? ';' : '') + customFonts;
// Update the config.font_names
config.font_names = updatedFonts;
The format to follow for any new entry is '<Font Dropdown Name>/<Font Name>, <font-type>;' and to separate entries with a space and '+'.
The information to fill this out for your chosen fonts is displayed in the CSS Class section on the Google Fonts website, the screen opened in Step 5:
8. Once you have edited the code to suit your fonts, copy this and head to Admin > System > Labs > Edit CK Editor configuration > ckconfig.js and paste it into 'File contents'.
9. Everything should be set up for the new fonts to appear in content creation areas.
Check if the changes have been successful by opening a new article in Blog, News & Knowledge base as well as text page components. The font additions should now be the last in the list for use.
If you were already looking at a theme where the new font(s) were added, this will appear selectable in content creation areas on saving.
If you are not, you will need to switch to a theme where this was updated to check the font appears when viewing it.
Please note: You won't be able to see the desired font until the content has been saved. This is due to CSS only being called when viewing intranet pages (and not when editing).
The video below shows the difference in the fonts when editing vs once published:
