How to Change the Font on Tiles Design Elements

If you have applied some custom fonts and typography on your site in ShortPoint Theme Builder and want to utilize the same font and apply it to your Tiles Design Element, then this article is for you.

In this example, we applied Montserrat as the Site Title font in Theme Builder and used the same font for the Tiles Design Element text:

TABLE OF CONTENTS

• Prerequisites
• Quick Way to Check Existing Font Style
  • Step 1: Open Developer tools
  • Step 2: Get font family value
• How to Change Font on Tiles Design Element
  • Step 1: Edit the ShortPoint web part
  • Step 2: Open Tiles Design Element settings
  • Step 3: Copy and paste custom CSS
  • Step 4: Apply changes and save

Prerequisites

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You configured your SharePoint site to have custom font and typography on specific page elements (not including base and body font) using ShortPoint Theme Builder.
• You have a Tiles Design Element added to your SharePoint page.

Quick Way to Check Existing Font Style

Before we begin, let us show you how to view the font style applied to any part of your page without opening Theme Builder.

In our example, we will show you how to view the font applied to the Site Title.

Step 1: Open Developer tools

• Right-click on the Site Title. A dropdown menu will appear.
• Click Inspect. This will open your browser’s Developer tools.

Note: If you are using a browser other than Google Chrome, you can check out our article on how to Save Browser Console File to learn how to open your browser’s Developer tools window.

Step 2: Get font family value

The Site Title will be highlighted and the HTML item will be selected on the left side of the Developer tools window. To get the font family value:

• Navigate to the Computed tab on the right side of the Developer tools window.
• Look for the property font-family and copy the value

Now, you have the font you will be applying to the Tiles Design Element. In our example, the font-family value is Montserrat.

How to Change Font on Tiles Design Element

You can modify the Tiles Design Element font by following these steps.

Step 1: Edit the ShortPoint web part

• Edit the SharePoint page.

• Select the ShortPoint web part and click the pencil icon to enter edit mode.

Step 2: Open Tiles Design Element settings

• Navigate to the Tiles Design Element.
• Open its settings by clicking the cogwheel icon.

Step 3: Copy and paste custom CSS

We will be using this custom CSS to apply the font.

/* change both title & description */
.shortpoint-tile-title-inner,
.shortpoint-tile-description {
  font-family: Montserrat !important;
}