How to Use Custom Fonts with Tailwind CSS

In this video, I'll show you how to use custom fonts in your Tailwind CSS project. We'll look into embedding Google Fonts, as well as self-hosting fonts using the @font-face CSS at-rule.

[KingOfCorinth]

For that one person who is under a time crunch

Embedding Google Fonts: 0:37
Self Hosted Fonts: 7:22

[hmatpin]

Man, thanks for not monetizing this great channel

[codenameunknown]

8:13 looool. Big shoutout to Mr. Wes Bos out there.

[JimOHalloran]

Woohoo! Simon is winning at CSS and Year 4 Miniball! Division 1 no less!

[pedromartindelcampogonzale]

Your vídeos are really uplifting, love your attitude.

[kayf]

Great. Remember, when your website is also seen by people living in europe, including files from external sources like google is against eu gdpr law, because it transfers personal data (ip adesss) to other parties (worst of all: in the us) without prior consent. So selfhosting fonts, scripts, images etc is the only way to go

[oliverye]

Amazing video! super direct and to the point!! love this.

[RobertWildling]

Great and important video! – I Austria there is a weird law case going on, where a woman accuses more than 1000 website owners of not having been explicit enough about their Google Font implementation. She feels that here private data has been exposed. The case is not yet over, but it shows that it might be a good idea to self-host google fonts...

[moracabanas]

If you import fonts with @import and extend your tailwind.config.js you must rebuild. HMR just won't apply that font until you Ctrl + c your Node terminal. It took me 3h to point that. At least using windicss

[justinoneill]

I'm trying to add a custom icon font library w/ this method (material design icons to be exact). it's acting a tad bit strange though. Would be cool to see another video on how Tailwind recommends doing this.

[The_Penny_Seventeens]

Thank you my website is one step closer!

[mike]

Please can you do a video explaining css layout for beginners

[abdullahialhassan]

I have a question, while you are using the jit kit fo you need a css folder too

[YazinS]

Great video! I was hoping it would cover how to change the default body font? I don't see a class (e.g. font-body) that can be overridden?

[probelou]

If I have the one font with multiple weights and want to use the tw font-weight utility classes how do I declare that?

E.g. class="font-fontName font-weight-normal" or class="font-fontName font-weight-bold".

I tried this but the cascade wins so `fontName` uses 700 weight irrespective of the weight utility class.

@font-face {
font-family: "fontName";
font-weight: 400;
src: format("woff2"), format("woff");
}

@font-face {
font-family: "fontName";
font-weight: 700;
src: format("woff2"), format("woff");
}

[edanbenatar]

Would you have to define all the weight classes so that Tailwind behaves accordingly with the font weight utility classes?

[momenabdelghafar]

what is font-family in the text-editor

[ovuokeaghwotu]

How do make the imported custom font the global default font? Thank you.

[ICOReviewtoken]

Hi bro. I have a custom font that I want to import locally but it doesn't accept it. Also if I want to give users the ability to choose their own fonts when using, for example users will set the font for different title tags and font base, can I do it in nextjs 13? Please give me solution. I use nextjs 13, taiwincss. Thank you

[jobsphil]

I wish you provide html source together. I wonder how the regular / bold font applied to css.