How to use custom font in the bar - CTB

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

1. To begin, it is recommended to set your bar's font to Helvetica in the bar's configuration:

Screen_Shot_2023-02-18_at_12.03.59_PM.png

This will reduce loading time as Helvetica is a standard font and don't need to be loaded from another source.

2. Copy this code. This styling code can set the font in the bar to the font of your choice:

<style>
#epb_bar{
font-family: Courier !important;
}
</style>

3. Simply paste the code into the bottom code section in the bar configuration page:

Screen_Shot_2022-10-13_at_5.00.05_PM.png

4. Now you need to alter that code by replacing 'Courier' with the name of the font you would like to use.

For example:

<style>
#epb_bar{
font-family: Poppins !important;
}
</style>

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.

Screen_Shot_2022-10-13_at_5.02.42_PM.png

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.

Screen_Shot_2021-11-05_at_5.20.18_PM.png

Screen_Shot_2021-11-05_at_5.23.09_PM.png

Screen_Shot_2021-11-05_at_5.30.24_PM.png

Note that the preview may not not reflect the new font, but the live site will.

Final result:

Screen_Shot_2021-11-05_at_5.32.49_PM.png