How to Add Custom Fonts to Creative Studio Pages

Creating the required StyleSheets to reference the custom font

1. In creative studio, click on the content menu node associated with the pages you want to use the font within using the node directory on the left-hand side of the screen (TIP: use the Search bar at the top of the directory to find the menu option title)
   
   
    
2. In the central window you should now see the Manage StyleSheet button. Click this to enter the Menu Option Styles menu to add custom StyleSheets to this content node.
   
   
    
3. For this example, we will add in the Montserrat Google font using the API link: https://fonts.googleapis.com/css?fam...t&display=swap
4. To add the reference to this font, simply copy the embed link that references the font into the ‘Add new styleSheet box’
   
   
    
5. Next we need to create a CSS styleSheet that references this font family. In your text editor of choice, create a new CSS styleSheet which takes to following form:

6. 1.    .Montserrat {
   2.      font-family: 'Montserrat';
   3.    }

7. Save this CSS file and add to your apps assets using Asset Manager
   
   
    
8. Now add this newly uploaded CSS file to the content node styleSheets as above by clicking the folder icon to the right of the ‘Add new stylesheet’ box. Browse to the CSS file you uploaded and click on the filename to add it to the StyleSheet box
9. Click save to save the two new styleSheet additions
   
   

Using the new custom font within your pages

1. To apply the new font to your body of test, first select the text box you want to apply the change to
   
   
    
2. In the Classes box in the ‘Styles/component settings’ configuration pane, click the ‘+’ button and type the name of the font class you added in your CSS file. For this example, I referenced the font family as ‘Montserrat’. Hitting return will apply this font.
   
   
    
3. Alternatively, for advanced users, you can reference the font family directly in the CSS code for the page using the code editing feature available in Creative Studio 
   
   

• Article last edited: 18-Jun-2019