How to Change the Font on Tiles Elements

If you have applied some custom fonts and typography on your site, and you want to utilize the same font and apply it on your tiles, then this article is for you.

Important: This article assumes that you have used the Typography feature from the ShortPoint Theme Builder to customize the font of at least one thing on the page.

For the purpose of this article:

Using ShortPoint Theme Builder,  We have already applied the font Oswald into the Page Title, and we will explain how we used the same font applied on the Page Title to have it applied on our Tiles.

Step 1: Get the font family value

Open the page in Google Chrome, right click on the element that has the same font you want to apply it to your Tiles ( in our case it is the Page Title ), and click on Inspect

The developer tools will open, and your desired HTML item will be already selected on the left side of the developer tools,

On thr right side, navigate to the Computed tab, and look for the property font-family,

Once you find it, copy the value on its right side ( in our case its Oswald ), as shown below.

Step 2: Apply the Custom CSS

Edit the page, and open the settings of your tiles.

Then navigate to the Custom CSS tab, and paste the following code, replacing the font name below (Oswald) with your own font that we got from the previous step

/* change both title & description */
.shortpoint-tile-title,
.shortpoint-tile-description {
  font-family: Oswald;
}

If you're confused at some point, please check a detailed explanation of this step.

Final Result:

Please contact us in case you have any questions or suggestions.

For an advanced tutorial on Custom CSS please click here.

Also, you're welcome to check our other Custom CSS solutions.