Custom Fonts

Custom Fonts

How to add Custom Fonts List in Typography?

In this guide, we will be looking at how you can add custom fonts to your Gutenberg block editor. Often you would be looking to add your own custom fonts that you need special typography out-of-the-box design. In order to add your custom fonts, you need to have a few coding skills that need to required in order to fulfill your needs.

Now, if you need to access your admin panel The Plus Settings >> Extra Options and disable The Plus Blocks Google fonts.

Now, once you disable the option the plugin default typography options will be disabled on your site.

With that done, you need to add a piece of code to your functions.php file.

function tpgb_custom_list_filters( $fonts ) {
$custom_gFont = [
‘id’ => ‘unique-name’,
‘title’ => ‘Custom Font List’,
‘options’ => [
[
‘label’ => ‘Custom Font 1’,
‘value’ => ‘my_font_name_1’
],
[
‘label’ => ‘Custom Font 2’,
‘value’ => ‘my_font_name_2’
],
],
];
return array_merge($fonts, $custom_gFont);
}
add_filter( ‘tpgb_custom_fonts_list’, ‘tpgb_custom_list_filters’, 10, 1 );

Note: On ‘Custom Font 1’ you need to add your custom font name and on ‘my_font_name_1’ you need to add the value of the custom font.

Once you add the custom font names you will be able to see the Custom Typography fonts on your Block editor and select any of your blocks. You need to navigate to the Style (tab) where you can click on the Typography and choose the custom fonts that you have created from the Font Family dropdown.

Here’s a quick video as to how you can integrate the steps on your site.

If you have any questions please get in touch with our support
Helpdesk and we would be happy to assist you

Disclaimer: We recommend you can keep the backup of the file once you make changes as once you get theme updates the changes that you have made will be overridden on your theme’s files.

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.