Tailwind HTML Component and Custom Fonts

Hi, I’m really excited about the latest update featuring the integration with Tailwind. Let me start by saying that I was already using Tailwind in projects outside of the WordPress context, so this integration pleased me enormously. Looking at the documentation, I saw that it is possible to copy and paste HTML components made with Tailwind directly into Cwicly by activating HTML to block in the settings, but in my installation the item is not present. I attach photos.


I also wanted to know if to integrate Custom Fonts you need to use the classic Tailwind configuration file, as for projects outside of WordPress, or is there a different method that I missed.
A thousand thanks

1 Like

Hi @qodesign,

This is a known issue:

1 Like

Thanks, in fact everything works well in the pages and posts.
Is there anything about this for Custom Fonts?

What do you want to know about custom fonts?

Are you referring to using them with Tailwind or just within Cwicly?

For the Cwicly side:

For the Tailwind side, you can still use the same Cwicly fonts from the Font Manager, just specify them in the Tailwind config either overriding an existing font or adding a new custom one:

Here are some examples of how to update the config:

In Tailwind mode the field for the Font Manager does not appear, but you must set the fonts from the typography settings. If I want to import them from Tailwind configuration file, how do I specify the local path, i.e. where cwicly saves the fonts locally?

Hello @qodesign,

As long as your font is active within the Font Manager, you should be able to reference it through the Tailwind config using the font’s name, no paths are necessary.

Cheers,

Thanks Louis, I’ve been trying since this morning but it doesn’t seem to work. I’ll attach my configuration to you, maybe I’m doing something wrong.

Hello @qodesign,

Oh, you’re right! Just tested on the sandbox and it is not applying…
We’ll have a fix for this in the next update.

For the time being, you could apply it to a global class which will call the font file on the frontend.

Thanks for persisting.

Cheers,

Hi @qodesign,

Thank you for bringing this to our attention!

This should now be fixed with 1.4.0.1:

Kindly let me know if this is the case on your end.

Thank you in advance.

1 Like

Great, I just updated to version 1.4.0.1 and the problem is solved. You are great guys

1 Like

Hi do you upload fonts to the global font manager when using tailwind. The Global font manager doesn’t seem to appear for me at all when tailwind is activated.

Hi @daniel,

You can simply press the Tailwind mode button in the inspector to toggle the mode off, which allows you to access the Font Manager button.

Alternatively, currently, as of v1.4.0.1, the Globals > Typography tab is unaffected by the Tailwind mode and the Font Manager is always accessible there.

Screenshot 2024-02-10 at 01.10.01

Thanks, I see it now. Much appreciated!

P.s. This tailwind integration is so cool…

1 Like

I have the same issue but on 1.4.0.3 I have no option to open the font manager via globals anymore.
Turning the tailwind mode off in the inspector could not solve this neither.
Defining custom fontFamilies via Tailwind configuration does not automatically import the font.

What’s the approach for 1.4.0.3?

Hi @n1xn,

The following still applies perfectly in the latest Cwicly version for us. If you are seeing something different, please post a screenshot.

UPDATE: @StrangeTech This scenario only occurs when working in templates. In my case I was working on a header. When switching to a site a can verify that the global font manager is indeed available. Little bit confusing, as I always start a project with the header :sweat_smile:

@StrangeTech Sure, here you go!



Hi @n1xn,

So I believe I may have isolated what you are experiencing.

The font manager is available in templates as well as pages. However it is only available in the base breakpoint :smile:

If you switch to any other breakpoint, then it is no longer shown.

WOW - I am impressed, you are completely right!

Thank you

1 Like