1. Home
  2. Docs
  3. ProductX
  4. Addons
  5. Custom Fonts

Custom Fonts

This is the step-by-step documentation guide for using custom fonts in your WooCommerce store.

Activate Custom Fonts Addon

First, you must activate the ProductX Custom Font addon to add and use them.

Enable the Custom Fonts Addon

Go to ProductX → Addons, and activate the Custom Font addon with the toggle bar.

Upload Custom Fonts

Follow this guide to add WordPress custom fonts with the ProductX plugin.

Step 1: Access the Custom Fonts Section

Login to your WordPress Dashboard. Locate and select the “ProductX” menu option. Click the “Custom Fonts” option to access the font editor page.

Adding New Custom Fonts

In the Custom Fonts section, click the “Add New” button. This will take you to the font upload page, where you can add a new custom font.

Step 2: Provide Font Details

Give a name to the custom font for easy identification. This name will be used to select your custom font.

Name Your Custom Font

Step 3: Upload the Font File

Click the “Add Variation” button to reveal the font upload options.

Upload Your Font

Choose the appropriate font format from the available options (WOFF, WOFF2, TTF, SVG, EOT).

Click the “Upload” button to browse and select the font file from your computer.

Step 4: Specify Font Weight

Select the desired font weight from the available options. Font weight determines the thickness or boldness of the characters and is essential for proper font styling.

Font Weight Selector

Step 5: Preview Custom Font

After uploading the font, a preview of the font will be displayed. Make any necessary adjustments if the font preview does not match your expectations.

Custom Font Preview

Step 6: Add Additional Font Variations

If you have multiple variations of the same font (e.g., thin, bold), you can also upload them.

Click on the “Add Variation” button again to add another variation.

Add Custom Font Variation

Name the variation the same as the initial version of the font. Upload the font file for this variation. Select the corresponding font weight for the specific variation.

If you have more font variations, repeat Step 7 to add them. You can upload unlimited variations for a font, so feel free to add as many as you need.

Use Custom Fonts

Follow this guide on how to use WordPress custom fonts with the ProductX plugin. You can use custom fonts everywhere, like on a page or in the ProductX Gutenberg builder. 

Step 1: Create a New Page / New Page Template with WooCommerce Builder

Go to your WordPress Dashboard and navigate to the Pages section. Click “Add New” to create a new page on your website.

Creating New Page

Or, you can go to ProductX > WooCommerce Builder. Click “Create a Template+” to create your desired store page template.

Creating Page Template with Gutenberg WooCommerce Builder

Learn how to use the ProductX Gutenberg WooCommerce Builder.

Step 2: Add ProductX Blocks

Choose the ProductX block you want to work with (e.g., Product Grid block). Or, add the required ProductX Blocks to the page.

Adding Product Blocks

Step 3: Access Typography Settings

Select the ProductX block you added to the page. Look for the title settings of the block and find its typography settings. These settings allow you to customize the font style and appearance for the selected block.

Access Typography Settings

Step 4: Customize Font Family

Within the typography settings, find the option to customize the font family. Click the “Family” label below, and a drop-down menu will appear.

Font Family Dropdown

Step 5: Select Custom Font

All the custom fonts you uploaded earlier will be displayed in the custom font section.

Selecting Custom Fonts

Select your desired custom font from the available options.

Step 6: Choose Font Weight

After selecting the custom font, you need to choose the font weight.

Selecting Font Weight

The weight options will be based on the variations you uploaded earlier for the font. Select the appropriate weight to achieve the desired font style.

Step 7: Adjust Font Settings

Once you have selected the custom font and its weight, you can further adjust the font settings.

Font Size and Other Settings

The typography settings include font size, line height, letter spacing, and more.

Modify these settings according to your preferences to achieve the desired typography style for your ProductX block.

Customize Custom Fonts

Follow this step-by-step guide to customize WordPress custom fonts further.

Step 1: Font Size Customization

In the settings panel, locate the option for font size customization.

Font Size

Select a fixed font size (e.g., 13, 16, 20, 36, 42) or enter a custom font size using the provided input field. Choose the desired font size to make the text smaller or bigger.

Step 2: Font Decoration Customization

ProductX provides options to change font decorations such as underline, overline, and line through.

Font Decoration

So, locate the font decoration customization. Select the desired decoration option to add the corresponding style to your custom font.

Step 3: Font Style Customization

ProductX allows you to change font styles, including italics and oblique.

Font Style

So, locate the font style customization options within the typography settings of ProductX. Please select the desired font style option to apply it to your custom font. Note that some fonts may not support certain styles.

Step 4: Font Transformation Customization

ProductX lets you transform the font text into different cases: AB (all capital case), ab (all lower case), and Ab (title case). Select the desired font transformation option to change the case of the text.

Font Transform

Step 5: Font Color and Hover Color Customization

Within the typography settings, you will see the font color customization options.

Font Color

Select a color from the palette that suits your design, or enter specific color codes in HEX, RGB, or HSL formats. The text color will be updated accordingly. You will get hover color options within the typography settings, like font color customization.

Using all the available customization settings in ProductX, you can personalize your site with WordPress custom fonts without hassle.


Here is the final output of a product page we have customized with ProductX custom fonts.

Custom Font Final Output

Font Weight Guide

Font weight is crucial in determining the thickness of a font’s strokes, impacting the visual outlook of the text. When uploading custom font variations with ProductX, follow this guideline for optimal font weight selection:

Font Weight Guide

Suppose you have thin, regular, medium, bold, and other variations for a font. Ensure consistent naming while adjusting the weight for each variation:

  • “Thin” variation: Select weight 100
  • “Light” variation: Select weight 200
  • “Book” variation: Select weight 300
  • “Normal/regular” variation: Select weight 400
  • “Medium” variation: Select weight 500
  • “Demi-Bold” variation: Select weight 600
  • “Bold” variation: Select weight 700
  • “Extra-Bold” variation: Select weight 800
  • “Heavy” variation: Select weight 900

Follow this guide strictly when using multiple variations of the same font.

Was this article helpful to you? Yes No