The Lumin Theme allows users to customize their website's typography by adding multiple fonts. This section provides detailed instructions on how to manage fonts within the Lumin Theme.
Last updated
Step 1: Adding the font files to your store
The first thing that we have to do is to add the fonts to the Shopify store. From there, we can reference it via code and use it in our theme.
From your Shopify admin, navigate to Content > Files > Upload Files
Click on upload files at the top right and upload all of your font files. Web Font files are the ones that have the following extensions: .ttf, .woff,.woff2, .eot, .svg or .otf.
Therefore, make sure you upload all font files that came with the .zip, or at least the ones you want to use.
In this case, I have one single font file with the .woff2 format, so I'll be uploading only this one.
Then copy the url link of the font you have uploaded.
Step 2: Adding the Custom font section to your store
Search for “Lumin Custom Font” section and add it
Click on the arrow on the left to expand it, and then click on “Add font”.
Under “Custom font name”, make sure you add a descriptive name. It can be anything you wish.
Now, under “Custom font URL”, add the URL for the file that was added back in step 1. Simply click on the chain icon to get the font's URL.
On the screenshot above you can see that the font is immediately loaded right on the Customize page.
You can select which HTML elements should display your custom font, as well as add as many fonts you'd like.
Bear in mind that whatever font is first in the list will always overwrite the ones below it. Therefore, if you have added 5 fonts and assigned the “H1” for all 5 of them, the “H1” will use only the very first font in the list.
If you'd like to use your custom font only for specific elements, you can use the “CSS Selectors” and add your selector there. Continue reading below to learn how to find your website's CSS selector.
While in the page containing the element whose font you wish to change, press CRTL + shift + c to open your browser's developer tools in inspection mode. If you're using a Mac, that's CMD + shift + c instead.
Find the text you want to change the font of and click it. This will highlight the element in the HTML.
Next, right click the element in the HTML, go to “Copy” and click “Copy selector”. This will copy a CSS selector meant to target this exact element.
Note that this is a hard coded solution meant to select a single element, meaning that changes to your store's HTML (specially to areas near where the font was changed) are likely to cause it to stop working.
If that happens, you can re-do this section of the tutorial or use a broader CSS selector. You can do it as many times as you want for any number of elements.
Custom fonts are great, but use them wisely: too many fonts will end up overloading your website and taking a toll on its performance.
Now that you have your CSS selector, simply copy and paste it at the very bottom at “CSS Selectors”:
Remember that you can also fully disable the Lumin custom font at any time you wish by simply clicking on “Lumin Custom Font” > uncheck “Enable”.
