Cannot get Google Fonts to work with Tailwind

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.

MIT License

171 stars 9 forks source link

Cannot get Google Fonts to work with Tailwind #460

Closed grandslammer closed 4 years ago

grandslammer commented 4 years ago

I cannot get Google Fonts to work with Tailwind. I have tried multiple methods including adding the link to the HTML head, importing via my own CSS style sheet, and also via the tailwind.config.js file. I cannot get any method to work.

I think it would be very helpful if this could be added to the official documentation, perhaps with a short 1-minute video tutorial going through the whole process of adding Google Fonts.

I have attempted these solutions: https://github.com/tailwindcss/discuss/issues/177 https://github.com/tailwindcss/discuss/issues/277 https://scottw.com/blog/google-font-tailwind/ https://tailwindcss.com/docs/font-family/ https://medium.com/@saulchelewani/how-to-setup-vue-tailwindcss-with-custom-fonts-and-hsl-color-palette-cda43bf64fea https://laracasts.com/discuss/channels/guides/tailwindcss-adding-custom-font-family-from-google-font

How does someone go about using Google Fonts with Tailwind?

tlgreg commented 4 years ago

This is more of an issue for tailwindcss/discuss.

The required steps would be:

Include the google font's @font-face declarations in some way. Either grab the css via a <link> or an @import in css. There are some other ways too, but these would be the most straightforward ones.
Add the font to fontFamily config in tailwind.config.js. Either in a new fontFamily or replacing an existing one.
Add the font-{family} class to the element you want to use it on. If you want it to be the default you can add the class to the <html> itself or could also use @apply (docs).

An example using <link> and a new fontFamily (see Config tab). https://tailwind.run/MPgJXo

grandslammer commented 4 years ago

Thank you for your reply. I have done exactly what you said in your reply and the link but it's still not working. I have added the link href to the HTML head, the font family in the config file, and added the class to the element in the HTML. I have worked with Google fonts before without Tailwind and it's usually very simple.

grandslammer commented 4 years ago

I managed to get it to work by referencing the element ID in my own CSS file. Basically doing it the old fashioned way without using Tailwind. I'm happy that it's working however it is strange that I couldn't get it working with Tailwind no matter what I tried.

adamwathan commented 4 years ago

Can you create a GitHub repo that reproduces your issue? As @tlgreg demonstrated it definitely works.