How can we help you today?

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:


sample result


TABLE OF CONTENTS


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.


open developer tools


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.


font family value


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.


edit the page

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


enter ShortPoint edit mode


Step 2: Open Tiles Design Element settings

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


open Tiles settings


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,
.shortpoint-tile-description {
  font-family: Montserrat;
}

You can replace Montserrat with the font-family value you copied earlier.


  • Copy the code.
  • Go to the Custom CSS tab on the Tiles Design Element settings window.
  • Paste the code into the space provided.


custom css


Step 4: Apply changes and save

  • Click the green checkmark button to apply changes.
  • Hit Save.


That's it! The new font will be updated on your Tiles Design Element.


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 52 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more