[Resolved] How do Google Fonts work in Toolset?

[Author]

Posts

[hernanL]

Hello

I'm optimizing a website with Toolset and I can't find documentation on how Google Fonts work in Toolset

In my particular case I have several fonts that are downloaded several times. Perhaps the most optimal thing would be to disable all Google Fonts in Toolset and manage everything from GeneratePress. It is not optimal to download the same font more than once in the same url

What would you recommend doing if I have a website where the same font is downloaded more than once by Toolset? Working with GeneratePress

I also need to know how to apply font-display:swap (I would like to know if @font-face is applicable to fonts loaded by Toolset)

Thanks greetings

[hernanL]

Toolset blocks are incompatible with safe font like arial or verdana?? How?? Why??

[Nigel]

Hi there

I've just been doing some testing of this on my own local site, and I haven't experienced any problems with duplicate font requests.

I have a page that I added a Toolset Heading block to.

Initially I didn't specify a font in the Typography settings, which means when displayed on the front end the heading simply uses the styles defined by the theme, including font-family.

If the theme specifies font-family rules that include a list of fonts with fallbacks, and includes locally installed system fonts (like arial or verdana) then they would be used.

I then updated the Heading block to use some Google font.

When I loaded the page on the front end there was a single request to the Google API for the font. Subsequent page loads (of the same page, or other pages where the same font is used) would use the font from the browser cache memory, and wouldn't hit the Google servers again (unless, during testing with the browser console open you have disabled the browser cache).

If the same font were requested twice on the same page (which I'm not seeing, but it sounds like you may be) then the second request would simply be served from the browser memory cache, the font wouldn't be retrieved and downloaded a second time (unless the browser cache is disabled).

I also tested with GeneratePress and didn't experience any problems.

One thing to watch out for, though, could be if GeneratePress loads Bootstrap and you also have Toolset set to load Bootstrap.

In any case, you can not have Toolset load any Google fonts by not setting font-family in the Toolset block settings, and instead let the Toolset content font be determined by the theme. (If the theme styles don't target some Toolset content you can used the Advanced tab to add an ID or Class that you can use to apply style settings in CSS you add to your child theme).

[hernanL]

Hello,

Thanks for the reply. What happens is that in a real scenario it is most likely that you are working with fonts in the design of the website itself.

For example, in my case I am working with Dancing Script implemented by the Theme itself. So when I use Dancing Script in the View Block the same font is downloaded again, if the same page has another View in my case the same font was downloaded again (3 sources for the same font)

It would be VERY good if the plugin allowed you to disable Google Font download requests for people who are loading fonts from another source (be it managing the download in theme or locally)

One solution is NOT to select font in the toolset block and adjust everything using CSS (this way in my case I centralize the fonts in the theme and avoid redundant requests). But it's uncomfortable

In any case, thanks for the tests and the response.