1. Home
  2. Docs
  3. FAQ
  4. How to add custom Fonts in Woostify?

How to add custom Fonts in Woostify?

Sometimes you may want to upload a font locally, instead of using a service like Google Fonts. This article will take you through the steps to do this.

In this document, we’ll use Google Fonts. However, this process is the same as other font files you could have.

You need to use Woostify child theme and use Custom font plugin to upload your font

Note: If you’re comfortable with uploading files to your server via FTP, you can skip the 1st step and simply upload your font files to your child theme.

1. Upload your font

Go to Plugins -> Add new, install and activate Custom font plugin, then follow the instruction to upload your font there

Then copy the URL of your font

http://woostify-test.local/wp-content/uploads/2019/02/open-sans-v15-latin-regular.woff2

2. Use child theme

Go to Themes -> Add New and upload the child theme

Using FTP/SFTP or your Cpanel hosting account to edit the file in the child theme.

Open woostify-child/style.css file and add the custom CSS code below

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Change the code value to your upload font in Step 1 such as font-family and src URL

3. Add Custom font to Customizer

So, our fonts are uploaded, and referenced in our CSS. We could now write our own CSS, and reference our new font family.

However, if you want to use our Typography controls in the Customizer, we need to add the font into our list of fonts.

In our CSS, we took note of our font-family name. In this case, it’s Open Sans.

We can now use a filter to add it to our Customizer list:

add_filter( 'woostify_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';

    return $fonts;
} );

Now when you go into your Typography settings in the Customizer, you’ll find your font-family name within the System Fonts section of the dropdown.

Was this article helpful to you? Yes 2 No 1

How can we help?