Custom Fonts

Our stores can use any Web Font (.woff, .woff2) font files. For more information on Web Fonts see https://fonts.google.com/knowledge/glossary/web_font .

Web Fonts are upload to your store instance then added to a CSS file which then allows your fonts to be added to the Stores Theme .

If you would like us to add a custom font for you please submit a support ticket and include your font files.

Adding Custom Fonts

1. Convert your fonts to woff and woff2 formats if not already in those formats. We recommend using https://cloudconvert.com/ttf-to-woff

2. Upload your fonts to the Media Tab of the store builder.

   

3. Created a css file containing your fonts. Replace the {values} in the fields below.

   CODE

   @font-face { 
   	font-family: '{font_name}'; 
   	font-weight: {font_weight};
   	src: url('{woff2_font_url}') format('woff2'), 
   		url('{woff_font_url}') format('woff') 
   }

   Example

   CODE

   @font-face { 
   	font-family: 'Poppins Regular'; 
   	font-weight: 400;
   	src: url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-Regular-1698704565738.woff2') format('woff2'), 
   		url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-Regular-1698704798369.woff') format('woff') 
   }
   @font-face { 
   	font-family: 'Poppins Bold'; 
   	font-weight: 700;
   	src: url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-Bold-1698704223024.woff2') format('woff2'), 
   		url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-Bold-1698704787443.woff') format('woff') 
   }
   @font-face { 
   	font-family: 'Poppins Extra Bold'; 
   	font-weight: 800;
   	src: url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-ExtraBold-1698704536241.woff2') format('woff2'), 
   		url('https://store-media.mpowerpromo.com/65204b2a109394488dae3d72/assets/Poppins-ExtraBold-1698704787446.woff') format('woff') 
   }

4. Add CSS to your sites Head Tags.

   1. Open the Head Tags from the stores main menu.

   2. Select Add Tag and then Link.

      

   3. Fill out link form.

      

      1. Set Description to “fonts.css”

      2. Set Rel to “stylesheet”

      3. Paste you custom css in the code editor.

      4. Select Save.

5. Update Theme to use custom fonts.

   1. Navigate to the Theme section of the store builder.

   2. Under the Typography section enter your Base and Headings Font Family as well as Headings Font Weight.

      

   3. Select Save Theme.