Overview

Bonzai and Brick versions 2.0 and above now support the ability to specify Google fonts in Bonzai. This article describes the process through which this can be achieved.

Solution

The currently supported font library is Google Fonts. You will need a font that supports both a 400 and a 700 weight. For our example, we will be using Roboto Slab. 

Select your chosen font

1. Load the site and use the search to find a font you'd like to use in Bonzai. 
   
   
   
   
2. Set the font to the Regular 400 weight, locate the + (select this font) link. Click on it. 
   
   
   
   Note: Repeat the process after selecting the Bold 700 weight. If you have different primary and secondary fonts, locate your second font and repeat this process.
3. A box will appear at the bottom of the page indicating you have selected this Font Family. Expand the selected font and you should see a preview like this:
   
   1. For a single font: 
                                                                                               
      
      
   2. For two fonts:
      
      
      
      
4. Collect and save the following details:
   1. The link tag that will go into the Master Page
   2. The CSS rule that we'll add to Brick.

Update the Bonzai Master page

1. Go to Settings Cog > Site Settings > Master pages and page layouts.
   
   
   
   
2. Select Bonzai.
   
   
   
   
3. Click on the Arrow next to bonzai.master, and click on Download a Copy.
   
   
   
   
4. Open the Bonzai Master file you downloaded within a text editor.
5. Locate the following line:

   <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

6. Replace it with the following link rel and the Link Tag you collected for your chosen font:

   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">

7. Save the changes to the file.
8. Re-upload and Publish the modified Bonzai Master File, replacing the original copy.

Update your Brick Settings

1. Login to Brick.
2. Click on the Themes Icon from the left navigation pane.
3. Select Edit next to the theme that your master page is pointing to.
4. On the right navigation pane, locate the Primary and Secondary Font fields.
5. Add the CSS Value that you collected for your chosen font.
   1. For our example: 'Roboto Slab', serif;
6. Publish your theme.

Testing

After publishing the changes to your Bonzai theme within brick, refresh the page for your Bonzai Intranet. You should now see your new font appearing.