How To Use A Custom Font In WeSupply Page and Block Templates?

In some cases you may need to use a custom font on your WeSupply Pages: Order Tracking, Order View, Browse All Stores, Store Details etc., to match your brand's look and feel.

The process is quite simple and can be done via the WeSupply Admin. We'll take the Order Tracking Page as an example below. however, the custom font will be applied across all pages. The steps are as follows:

Step 1

Go to your WeSupply Settings -> Branding -> Pages -> click Edit Template -> Tracking Page:

Step 2

On the Tracking Template, scroll down to the Global Custom CSS box, where you can insert your custom font. 

In our example, we imported the Dancing Script font as a custom font as below:

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

You can change the font above with your own custom font and hit Save.

Step 3

Now, you should target the elements you want the custom font to apply to, and insert the style in the Global Custom CSS.

In our example, we targeted all the text elements from the Tracking Page, as follows:

.customized-style h1, .customized-style h2, .customized-style h3, 
body.customized-style, .customized-style p:not(.link):not([class^='return-']), 
.customized-style .description_color, .customized-style a:not(.nps-marks), 
.customized-style p.link, .customized-style .link {
font-family: "Dancing Script", cursive;
}

You can target different elements more specifically if needed.