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.

Method 1: Use Custom font plugin to upload your font

Upload your font

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

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.

Method 2: Use custom code

Step 1: Upload your custom font

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

Now that we have our font files, we need to upload them to our server.

By default, the WordPress Media Library doesn’t allow us to upload font files. This is due to security concerns with some of these files.

However, we can temporarily allow these files to be uploaded by adding the below function to our website. Once we’re done, it’s best to remove this function.

add_filter( 'upload_mimes', function( $mimes ) {
    $mimes['woff']  = 'application/x-font-woff';
    $mimes['woff2'] = 'application/x-font-woff2';
    $mimes['ttf']   = 'application/x-font-ttf';
    $mimes['svg']   = 'image/svg+xml';
    $mimes['eot']   = 'application/vnd.ms-fontobject';

    return $mimes;
} );

Now we can upload our font files into the Media Library.

Now that our files are uploaded, let’s copy the File URL to one of them.

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

Step 2: Using Font face CSS

Add the custom CSS code below to your site, you can add this to Customizer -> Additional CSS or using any plugins, don’t forget to change the example URL to your URL.

@font-face {
font-family: 'Open Sans';
src:url('http://woostify.local/wp-content/uploads/2019/02/open-sans-v15-latin-regular.woff2;) format('truetype');
}

Step 3: Add custom PHP

The final step is adding custom PHP code below to the child theme or using Code snippet plugin.

add_filter( ‘woostify_typography_default_fonts’,’custom_add_system_fonts’ );
function custom_add_system_fonts( $fonts ) {
$fonts[] = 'Open Sans';
return $fonts;
}

In this example, we’re using Open Sans font, don’t forget to replace it with your font name.