Variable Fonts

So I think it’s good that you use .woff2 for custom fonts. However, it is a bit cumbersome if you want to use many different variants of one or even more fonts. Here it would be helpful if you could use variable fonts.

More info here: https://fonts.google.com/knowledge/…

5 Likes

That’s on my wishlist for quite a while as well :+1:

I see this as high priority too, besides dealing with woff2 is cumbersome, more and more fonts are only available as variable fonts, the fonts I used with my current themes all are variable

1 Like

This is indeed higly needed.

Using variable fonts via Google makes Pagespeed mobile tumble down…

In the meantime, in case you didn’t know, you can use this awesome script from the awesome Mathias Altmann:

It works out of the box for Cwicly.

Only limitation is that fonts are not included in block settings UI, but you just need to add font-family: 'Font name' rule to your custom CSS.

By the way I’ve already asked him to integrate Cwicly :wink:

Great, plugin is working, and recognizing uploaded variable fonts. Where and how do I have to put the font-family: 'Font name' rule, within the style.css (I am trying to avoid the use of that with Cwicly)?

Either in your child theme’s style.css or in a custom stylesheet you created in Cwicly or via a code snippet plugin, it really depends on your habits.

I guess you can even put it in Cwicly settings / Custom code, with <style> tag in your head.

I personnally put all my CSS in a stylesheet inside Cwicly editor so that I can see changes in realtime.

Not sure if this is the solution I expected. Is it possible to add a snippet to Cwicly settings (and what is the Snippet then?), so that the local fonts stored by this plugin can be selected throughout the site within the editor when editing a typography?

No, and the author answered me he won’t do implement it, sorry, so you’ll have to wait for Cwicly to add the feature or to use the script and add a line of CSS.

understood, but then that plugin is nothing more than to show how the added local fonts is looking like, right? Or is it the prerequisite so that locally stored variable fonts are working at all?

If one want to use local variable fonts throughout the whole site (which makes sense from a performance and from a legal perspective), then a broader general solution is probably needed.

(I don’t want Cwicly let off the hook with this;-))

This script does a lot…

But basically you just drop the files (downloaded from Google, various font sites, web font loader site from the author) into the folder, and it decripts all filenames, variants, types, and generates and enqueues all the CSS needed to use the fonts anywhere (I can assure you that this is not trival).

Then, for Bricks and Oxygen, it also adds all fonts in font selector so that they canbe used anywhere in the UI for elements styling or global styles, but not for Cwicly.

So you need to add in your CSS stylesheet something like:

body {
  font-family: 'Your custom font' /* , fallback fonts if you wish */;
}
h1, h2 {
  font-family: 'Your heading custom font' /* , fallback fonts if you wish */;
}

This is not a lot, and it is just a workaround until Cwicly does handle it itself.

1 Like

your are right, it helps, and could be handled as interim solution, many thanks for posting this

I hope Cwicly will announce some ETA for their integration

It is working for variable fonts now on my end, but what I recognize, it shows up the right fonts on the frontend, but not at the backend within the editor. Same for you?

I’m working on a plugin that seamlessly integrates custom font to Cwicly. Will be published in February.

And it supports other page builders as well, including:

  • Cwicly
  • Gutenberg
  • Classic Editor
  • Bricks
  • Oxygen
  • Elementor (Working In Progress)

I’ve attached some screenshots.

1 Like

It’s nice seeing you here.

Update: work is done. Really excited to publish it

It’s nice to see you too

1 Like

Hi @ManuelHudec,

Thanks for the feature request.

This is now available in 1.2.9.5.
You can also specify Axes and custom Axes directly from the Typography tab for all Cwicly blocks.

Cheers,

2 Likes