Barberry - Modern WooCommerce Theme

Customizing Typography

Barberry supports rich typography customization options. You are free to select any of 900+ Google Fonts available from WordPress Customizer panel.

Choosing Fonts

Being in WordPress Customizer navigate to Customizer → Typography

Using Adobe Typekit

The theme supports integration with Custom Adobe Fonts plugin. This enables you to use your Adobe Typekit fonts in the theme. To make this plugin work you need to get Project ID from Adobe Fonts

Fonts for the project pre-selected on Adobe Fonts. Make sure to grab Project ID from project page

Set Project ID in Appearance → Adobe Fonts

If you've done everything correctly, a new font name should appear in fonts selectors in WordPress Customizer → Typography

Custom font is fetched from Adobe Fonts and ready to use


Uploading Custom Fonts

In Barberry theme you may also upload and use your own fonts. This feature is available in Custom Fonts options page in admin panel. Let's figure out the fonts uploading process step-by-step.

▶️️️️️ Step 1.

Before uploading the fonts into your website, you need to make sure that they are ready for use in web. The theme supports popular .woff and .woff2 web-font formats. If your font package is missing files with those extensions (for example, you may have only .ttf or .otf files), you will need to convert the fonts files to .woff format. Otherwise, feel free to skip this step.

There is a handy free online tool called Transfonter It allows to convert fonts to web-compatible format.

Upload your font files to the tool. Make sure that Family support is on and woff format is selected.


TIP

woff is the universal format supported across many modern browsers so it's recommended to selection. You can read more information related to the different fonts formats here in Font formats page


Click Convert button. You should get a download link with the .zip archive of your fonts package.

Unzip the archive and make sure that .woff font files are there.

▶️️️️️ Step 2.

Go to Custom Fonts options page in admin panel. Click on Add Custom Font button and enter your font name first. In the example font is named "Gilroy"

Now you need to upload your .woff font files to WordPress and select the appropriate font weight of the uploaded file.

The process of uploading other font weights is the same. Add Font File → Upload .woff File to Media Library → Select Font Weight → Repeat

After you are done with this, click Save Changes button in the top right corner. You should get a message that invites you to go to WordPress Customizer.

▶️️️️️ Step 3.

Open WordPress Customizer and go to Typography In the dropdown list you should see your new font name under Custom Fonts The custom font is now available to select and preview in live. Don't forget to click Publish to save changes.