Challenge

The client wanted to use 5 new custom fonts throughout their pages. They wanted to select and be able to change the fonts in the future on different HTML elements.

Our solution

For this project we had to first upload the new fonts. Then we also created new settings in their theme where they could toggle on/off the use of the new fonts, or simply use the default fonts in their theme. This was decided to give them even more control to use the existing fonts in Shopify, or whether they wanted to use their custom fonts.

When custom fonts are enabled, they are able to pick from a list of the 5 new fonts for each of the following html elements:

h1, h2, h3, h4, h5, h6, p, button, a

We also gave them settings to specify the size for each of the custom fonts

Final preview with custom fonts: