Using Custom Fonts in a Portal Experience

In this topic you will learn how to use custom fonts in a Portal Experience.

The Gallery Site Editor provides the ability to customize the style of a Portal Experience by changing the theme, colors and fonts. It's also possible to use your own custom fonts in a Portal Experience. In this topic, the Acme font from the Google font directory will be used to customize a Portal Experience.

Linking to a custom font file

The Google Font directory provides open source fonts that can be used on web pages. Locate a font to use and then click Select this style. In this topic, the Acme font will be used.

Note: When using custom fonts in an Immersion Experience, the @import code should be used. The <link> code will not work.

Per the Google help, the following lines should be embedded in the document.

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">

To include these lines in a Portal Experience, follow these steps:

Edit the experience.
Click Appearance and Behavior > Header and Footer in the left navigation.
Paste the <link> tag into the Custom Header HTML field.
Click Save.

Creating CSS for the custom font

To use the custom font, a style tag will be added to the portal Custom Header HTML field to style the appropriate text objects.

The development tools provided with your browser are helpful in getting the class names of the objects on the page that you want to style (objects we want to change the font for). Note that the element names will changed based upon the template being used. In the example below, we will change the font for the featured video and the font used for the video names that appear in the video grid on the page. Screenshots are taken using Google Chrome.

Using your browser development tools, inspect the element on the experience that you want to change the font for. In this case, the featured video title is being inspected. Locate the class name for the object.

Add the appropriate CSS to the Custom Header HTML field to style the featured video title with the new font.

  
      <style>
        .video-name {
         font-family:Acme;
       }
      </style>

Locate the class name for the video titles in the grid.

Add the appropriate CSS inside the existing <style> tag to style the video titles in the grid with the new font.


      .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
       font-family:Acme;
    }

Confirm that the Custom Header HTML field contains the following.

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet"><style>
      .video-name {
      font-family:Acme;
    }

    .bc-video-browser .bc-video-grid-items .bc-video-grid-item .caption {
    font-family:Acme;
  }
</style>

Click Save.
Click Preview > Responsive Preview to verify that the updated font displays.
When done, Publish the experience.

The complete CSS file for the template can be viewed by clicking on the View CSS link as part of the Appearance and Behavior > Custom settings. If you wanted to change all instances of a font, you could search for all occurrences of font-family in the template CSS and add the appropriate entries to your <style> tag.