How to use Angular tailwind components without external Google fonts?

[Thomas Weeber]

Hi everybody,

we're trying to use Angular components with Tailwind theming. However the component CSS files have external Google fonts hard-coded in them. We need to use those components offline and thus need to remove all external references and use self hosted fonts instead. How can we achieve that without touching the source files?

I saw that there's an option for the Material theme (https://www.syncfusion.com/forums/176969/remove-ej2-css-file-external-google-font ), but I could not find such a solution for a Tailwind setup.

Thanks

Thomas

[Theveshwar Jayakumar]

Hi Thomas,

 

Greeting from Syncfusion support,

 

We are providing a customized package for tailwind theme also, in which there won't be any google fonts, so you can use this theme in the offline mode. Please follow the below steps.

 

 

1. Install the following package by using the command given "npm i @syncfusion/ej2-tailwind-theme".

 

2. After installing the following package you can import the styles by adding link path to your styles folder

'@import '../node_modules/@syncfusion/ej2-tailwind-theme/styles/customized/tailwind.css';'

 

For your convenience we have create a working Angular sample which can be downloaded from below link.

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/AngularTailwind219415698.zip

 

Please get back to us if you have any queries.

 

Regards,

Theveshwar

[Thomas Weeber]

Thanks for the quick reply, Theveshwar, this was really helpful!

[Theveshwar Jayakumar]

You're welcome! Please get back to us if you need any other assistance

[Stephanie Katterwe]

Hey @Theveshwar Jayakumar

It looks like this is not working with the current version: "@syncfusion/ej2-tailwind-theme": "^21.2.3",

Installing this the customized css still has google fonts linked. Switching to material theme for testing we were able to see that inside the material customized css is removed but not inside the tailwind one.

Can you please help out?

Thanks and best reg

Stephanie

[Theveshwar Jayakumar]

Hi Stephanie Katterwe,

Sorry for the inconvenience caused,

We have investigated the reported scenario from our end, and as mentioned we have encountered this issue in our tailwind theme with the previous release version (i.e., v21.2.3). However, we have considered this as an issue from our side and we have resolved this issue with our latest patch release version (v21.2.4). So, we kindly request you to update our packages to our latest version (v21.2.4) to resolve this issue.

Please get back to us if you need any further assistance.

Regards,

Theveshwar

[Abhishek]

To use Angular Tailwind components without external Google fonts, start by configuring your Tailwind CSS to exclude font imports. Modify your Tailwind configuration to remove 'font-family' settings related to Google fonts. Additionally, ensure your Angular project's styles don't unintentionally import external fonts. By controlling font configurations in both Tailwind and Angular, you can maintain a consistent style without relying on external Google fonts, offering greater control over the visual aspects of your Angular Tailwind components. Reviewing and adjusting font-related settings in both environments will help you achieve the desired result.

To know more, read here: https://purecode.ai/blogs/tailwind-components/

[Theveshwar Jayakumar]

Hi Abhishek,

Greetings from Syncfusion support!

Thanks for sharing your feedback on excluding Google fonts in Tailwind CSS. If you have any further suggestions, or concerns, please feel free to share with us.

Regards,

Theveshwar