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 or added to CK Editor to appear for selection when creating content in News, Knowledge Base, Blog, and Pages (using Text component).
There are hardcoded font selections that appear in Claromentis when editing the style of the Master Design or a Theme:
However, it is possible to override the selection made in the Design panel and instead force the system font to be one 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
Written steps
1. Head to the Google Fonts website.
2. Click on the font you wish to add and select Get font to add it to the basket.
3. In the basket, click Get embed code:
4. Ensure all variants are included (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 and 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 & paste the code into the 'Advanced' tab of only those themes.
7. Next, the 'Custom CSS' field in the 'Advanced tab' of the Master Design or Theme needs to be updated with a different code to ensure the font is forced as expected.
The red part below can be edited to represent the fonts you are adding:
body {
font-family: "<Font Name>", <style> !important;
}
Usually, the 'CSS class for a variable style section' on the Google Fonts website will give the answers required here (as shown in the example video)
8. Once the code has been edited correctly paste this into the 'Custom CSS' field on your site and scroll to the bottom of the screen to click Save to apply.
9. If you were already looking at a theme where the new font was forced, this will update immediately 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.
