.png){kind=icon}
How to Set Message Font
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 Quick Announcement Bar that isn't among the selection.
You can set the font manually by adding a bit of code into the text field.
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. You'll need to have this code in every message box.
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 specialty font, it'll already exist in the theme files and should work with this walk through.
This next section is a little more advanced.
If you wanted to use a Google font in your message bar:
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: