.png){kind=icon}
How to use custom font in the bar
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 Quick Announcement Bar that isn't among the selections.
Please note:
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 walkthrough.
On this page:
To set font to the entire bar
- Copy this code:
<style>
#qab_bar{
font-family: Courier !important;
}
</style>
- In the app, scroll to the bottom of the configuration page, to the Custom Code section. Paste the code in that field, like so:
- Now you need to alter that code by replacing 'Courier' with the name of the font you would like to use.
For example:
<style>
#qab_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;">enter text</span>
Simply replace 'Courier' with whichever font name you would like to use, then replace 'enter text' with the word or words you would like to be in that font.
For example:
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 reflect the new font, but the live site will.
Final result:
Please note, this manual option and the examples above are provided to make it possible for merchants and their developers to implement their own customizations. It is recommended that you hire a developer for any theme customizations and to implement any edits to a duplicate copy of your theme. We do not offer any customization services.
Please feel free to reach out at help@hextom.com if you have any further questions.