We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to use Angular tailwind components without external Google fonts?

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



5 Replies 1 reply marked as answer

TJ Theveshwar Jayakumar Syncfusion Team December 6, 2022 03:35 PM UTC

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".

 

  1. 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


Marked as answer

TW Thomas Weeber December 7, 2022 09:19 AM UTC

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



TJ Theveshwar Jayakumar Syncfusion Team December 8, 2022 04:57 AM UTC

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



SK Stephanie Katterwe May 9, 2023 08:53 AM UTC

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



TJ Theveshwar Jayakumar Syncfusion Team May 11, 2023 04:32 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon