Adding Google Fonts into CKEditor

Overview

Google provides wide range of fonts which can be used on the web or intranet  https://www.google.com/fonts

This can be used as part of the Interface or add it to the available fonts in CKEditor for content creation.

Warning: If your system is hosted on-premise you might have some restrictions using Google Web Fonts due to firewall rules. Adding too many web fonts can increase load time and decrease system performance.

 

How to

1. Get the font collection from Google fonts put them into Collection and follow the implementation guide for Web usage

Select the style of font you wish to have (you can select multiple styles) For the purpose of this guide, were selecting Dancing Script Regular 400

 

2. Under Use on the web, choose link and copy the code shown.

3. In Claromentis, navigate to Admin > Design

You can either Edit Master Design if you wish to use it in all themes or select an applicable theme in which you wish to use this font.

Navigate to Edit Style > Advanced tab and paste the code into the Custom Code field.

Click Save

The font is now ready to use by the system, in the next step, we need to add it to the dropdown font-selector on the CKEditor.

 

4. Navigate to Admin > System > Labs > Edit CKEditor configuration

 

5. Select ckconfig.js if you wish to add this font for all applications when the full-editor is displayed such as News, Knowledge Base or Pages.

If you wish to allow font selection only on a specific application select relevant ckconfig_{application}.js

Paste the following code into the text area (replace the red line with your selection of custom font) by checking the reference for CSS rules to specify families.

config.font_names =
    'Arial/Arial, Helvetica, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    '<Font Dropdown Name>/<Font Name>, <font-type>;' +
    'Verdana';

Here is a video on how to:

 

Those included in the list entered will appear for use in CK Editor in Claromentis.

Entries are separated by semi-colons (';') and it is possible to have more than one font for each entry, in the HTML way (separated by commas).

A display name may be optionally defined by prefixing the entries with the name and the slash character.

For example, 'Arial/Arial, Helvetica, sans-serif' will be displayed as 'Arial' in the list but will be output as 'Arial, Helvetica, sans-serif'.

 

5. Click Save to store your customisation, if you wish to delete customisation and revert back to default simply click "Remove Customisation"

 

 

Please note: You won't be able to see the desired font until you have submitted the changes or previewing them.

This is due to the CSS which are only being called when viewing intranet pages (not when editing).

Editing vs Published.

For more reference CKEditor configuration please visit

CKEditor Documentation

 


 

 

 

 

Last modified on 30 November 2023 by Hannah Door
Created on 17 July 2015 by Michael Christian

Was this helpful?  

Share