Please note, this manual option and the examples below are provided to make it possible for merchants and their developers to implement their own customizations. It is recommended to hire a developer for any theme customizations, and to implement any edits on a duplicated copy of your theme. We do not offer any customization services.
Our bars offer many fonts that you can apply with the simple click of a button and no knowledge of coding. However, you may want to set a specific font in your message for the Countdown Timer Bar that isn't among the selection.
Note that for this to work, the font will either need to be installed on the user's device or be linked to in the theme files. Common fonts are usually already installed on most devices. If your theme already uses a particular font, it'll already exist in the theme files and should work with this walk through.
To set font to entire bar
This styling code can set the font in the bar to the font of your choice:
font-family: Courier !important;
Copy that code. If you are on the basic plan, paste it in the second message boxes highlighted in this image:
As you can see, if there is no message, simply paste the code in. If there is a message, simply paste the code after your message.
If you are on the Premium subscription, simply paste the code into the bottom code section:
Now you need to alter that code by replacing 'Courier' with the name of the font you would like to use.
font-family: Poppins !important;
To set font for specific Section
If you want to only set the font to a specific word or group of words, you would add a bit of code in the message.
Here's the code you'd need:
<span style="font-family: Courier;">text</span>
Simply replace 'Courier' with whichever font name you would like to use, then replace 'text' with your message.
Adding Google Fonts
This next section is a little more advanced.
On Google fonts, once you click on a font you like, the page will display code sections. One section you copy and paste into your theme's theme.liquid file in the <head> section. The other is the font-family name that you'll put into the message box.
Note that the preview may not not reflect the new font, but the live site will.