.png){kind=icon}
How to use custom font in the bar - FSB
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 Free Shipping 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:
<style>
#fsb_bar, #fsb_amount, #fsb_symbol{
font-family: Courier !important;
}
</style>
Copy that code.
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.
For example:
<style>
#fsb_bar, #fsb_amount, #fsb_symbol{
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: Arial;">enter text</span>
Simply replace 'Arial' with whichever font name you would like to use, then replace 'enter 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.
Final result:
