Skip Navigation

[Resolved] Google Font required for project does not appear in any Toolset block

This thread is resolved. Here is a description of the problem and solution.

Problem:
The customer is trying to use the Google Font "Manrope" in Toolset blocks, but it does not appear in the Typography Font List. They can see the font in other blocks (Kadence Adv Text), but not in Toolset, limiting their ability to change font weights within Toolset blocks.

Solution:
We checked with the development team and found that Toolset loads a predefined list of fonts from a specific JavaScript file (toolset-blocks/vendor/toolset/common-es/public/toolset-common-es.js). While this list includes many Google fonts, it does not include all of them. Currently, there is no built-in option to add custom fonts to this list.

The suggested workaround is to add a CSS class to the Toolset block and then use CSS to apply the "Manrope" font. Although this solution requires custom CSS, it allows the customer to use the desired font and make any necessary font-weight adjustments.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 0.58 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

This topic contains 2 replies, has 2 voices.

Last updated by Mateus Getulio 4 months, 3 weeks ago.

Assisted by: Mateus Getulio.

Author
Posts
#2705971
Screen Shot 2024-07-03 at 10.19.02 AM.png
Screen Shot 2024-07-03 at 10.19.23 AM.png

Good morning.

A project I am working on requires the Google Font "Manrope". Whenever I ned to us a toolset block, the font does not appear in the Typography Font List. Am i doing something wrong? or does Toolset not have access to all the Google Fonts?

Attached are screenshots of Toolset's Single Field block showing no results found, and a Kadence Adv Text block right above it showing the font being found.

The Toolset Typography settings does seem to properly inherit the site-wide font that I am using, however not having the ability to select it limits any font-weight changes that I might need to make while using the toolset block. I am aware that I can use CSS to make changes, but I should be able to at least select the font i'm using.

Maybe this is a bug, regardless, I felt that it should be mentioned so that it can be addressed.

thx

#2706204

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

I'm going to check it with our development team to see how the font list is loaded and how to include custom fonts.

I'm afraid that in the meantime, as you pointed out, the workaround would be to add a css class to that block and change its font family via CSS.

I'll let you know as soon as I have more news.

Thank you for your patience.
Mateus

#2706385

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

I checked it and Toolset loads a series of fonts in the file toolset-blocks/vendor/toolset/common-es/public/toolset-common-es.js.

Though there are Google fonts in the list, this list is predefined and only the fonts loaded in the file above(it's quite a huge list) will appear for you to select in the Blocks Typography configuration.

While there has been feature requests to allow the selection of custom fonts other than the ones available in there, at the moment, defining a CSS class to the block in question and applying the font via CSS is the only alternative to accomplish it.