One of our biggest feature requests is the ability to change the font size as well as add or remove font styling. We're hard at work on the feature and want it added over the next few months. in the meantime though, we do have a workaround for advanced users.

 

This work around requires basic CSS knowledge and the ability to be able to inspect the customer account page elements in your browser

 

Example 1:

Under 'Configuration > Custom CSS' you can add your own custom CSS, this includes the ability to make font changes:

To find the classes to use here, you can log into your customer account page (you'll need to have our app installed and active) and press F12 (or right click on the element you want to inspect > inspect element).

From here I've inspected the 'price' field (in the example below it's $516.00) and can see that the class is chCBPROWID-Actions-Price and the font-weight is set to 900. 

If I wanted to change this to for example, I'd copy the class value (below):

chCBPROWID-Actions-Price

and add it to the custom CSS section in configuration.

 

To define this as a class you simply use a '.' at the start of your custom CSS code

and then add the style settings I want in between curly brackets (these > {} ). In this example, we're going to change the font weight from 900, to 100.

.chCBPROWID-Actions-Price{font-weight: 100!important;}

 

Below you can see that the boldness has been reduced from 900 to 100.

 

 

This logic can be applied to every class. Changing the style shouldn't run into any issues however changing the font size, espesically making it larger can run into issues with text being hidden incorrectly for example so we recommend speaking with a developer before making these changes.

Example 2:

To update the entire font-family (change everything in the customer account page to a single font) you can simply update the the .customerhub font-family as below (font Oswald used as an example):

.customerHub{font-family: 'Oswald'!important;}

Which will result in the below font family changes:

 

 

FAQ:

Why hasn't the ability to change font sizes been added directly to the admin section?

  • Our app is built to be responsive with all stores and themes which means the font size is a fixed size. If the size of the font is changed, the entire style of the app needs to be adjusted to compensate for the new size as well as stay responsive across all devices. To do this, all themes need to be tested across all devices which takes a lot of time and testing.

I updated the font using CSS and now the account page looks a bit off?

  • This is because when the size/style of the font is changed, the entire style of the app needs to be adjusted to compensate for the new size/style as well as stay responsive across all devices. We highly recommend only website developers and Shopify experts make these changes.

I didn't choose the fonts on the customer account page, how do I change them?

  • The fonts are inherited from your theme, these can be changed from the theme editor and will update on the customer account page accordingly. You can also follow the 2 examples above to change the fonts in the customer account page without changing the theme fonts. If you're still unsure of exactly how to do this, we recommend speaking with a web developer or a shopify expert who will be able to make these changes for you