Xboost

How do I change the font of the announcement bar?

Overview

The announcement bar uses your theme's font, so it matches the rest of your store. The app has no font setting. To use another font, add custom CSS to the bar.

Steps

  1. Open Announcement bars and click the bar name.
  2. Click Design at the top of the editor.
  3. Under Advanced setting, paste this CSS in Custom CSS and replace Georgia, serif with the font you want:
.xba__content__title,
.xba__content__subtitle,
.xba__cta {
  font-family: Georgia, serif;
}
  1. Click Save in the bar at the top of the page.

The CSS applies only to this bar. Use a font that is already available on your store, for example one of your theme fonts. To change the font of every bar, add the CSS to each bar.

To change the font size instead, use Text Size in the Design step. You do not need CSS for that.