How to change the font of the Custom Product Builder interface to yours

Hello!

If you want to change the default font of the Custom Product Builder to yours it is possible to do with two ways:

1. The font that you like is one of the Google Fonts family https://fonts.google.com/

Please choose the desired font from https://fonts.google.com/ and click on "+" sign at the right top corner of the frame. After that, you will see the popup window at the right bottom corner with the instructions for font embedding like this:

Copy the code and paste it to the customproductbuilder.css asset in your theme editor:

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

After that you may use this font for interface customization. For example:

.cpb-panels-tabs {
  font-family: 'Lato', sans-serif !important; 
}

Adding "!important" to the end of line allows you to override the theme settings.

2. You want to use font that doesn't exists in Google Fonts collection.

First of all you need to have the font files with woff and woff2 formats. It is possible to convert ttf fonts to the Web Fonts with some online service that can be easily found in Google.

Once you have .woff files they should be uploaded to the settings -> files section of your theme:

To allow using these fonts in the Custom Product Builder interface you need to add following code to the customproductbuilder.css

@font-face {
 font-family: "Swiss_721_Rounded";
 src: url("https://cdn.shopify.com/s/files/1/0112/7094/6878/files/Gotham_Rounded_Medium.woff?v=1614313244") format("woff"),
      url("https://cdn.shopify.com/s/files/1/0112/7094/6878/files/Gotham_Rounded_Medium.woff2?v=1614313244") format("woff2");
 font-weight: normal;
 font-style: normal;
}

Copy the link if the file

and insert it into the url("") in the previous code example.

After that you may use this font for interface customization. For example:

#product-builder * {
font-family: "Swiss_721_Rounded", Helvetica, Arial, sans-serif !important;
}

Adding "!important" to the end of line allows you to override the theme settings.