How to Use Custom Fonts with Tailwind CSS 

For that one person who is under a time crunch Embedding Google Fonts: 0:37 Self Hosted Fonts: 7:22

Another great video, Simon! Bonus tip: use `font-display: swap;` in your `@font-face` declarations for a performance boost. This allows the browser to render first paint more quickly by displaying the system font as soon as possible, and then "swapping" to your custom fonts once they become available. It prevents the infamous FOUT (Flash of Unstyled Text) 😉

Man, thanks for not monetizing this great channel

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

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

Tailwind is the future

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

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

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

When Tailwind CSS Merch?

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

Thank you my website is one step closer!

I just googled for this yesterday!!

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

Thanks this helps a lot!

Thanks again!

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?

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.

🔥🔥🔥

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

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: url("../public/fonts/font-name-400.woff2") format("woff2"), url("../public/fonts/font-name-400.woff") format("woff"); } @font-face { font-family: "fontName"; font-weight: 700; src: url("../public/fonts/font-name-700.woff2") format("woff2"), url("../public/fonts/font-name-700.woff") format("woff"); }

Subscribed and liked!!

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

Please can you do a video explaining css layout for beginners

PRICELESS! Thanks 😉

how can we use variable fonts?

So epic once again.

just awesome

I maybe thinking too advanced or might not be performant but since the JIT compiler CDN is JS and you can use [ ] in classes, wouldn't it be easier if the CDN auto-imported the google font if you use say font-[Roboto] then it'll auto import the font as a link tag in header and dynamically create the css needed, just an idea anyway :) I'm starting to look more into customising Tailwind after using the defaults for a while along with custom css

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

what is font-family in the text-editor

Would have liked a V2.2 example of this in the video! I had to work it out myself the other day 😅 Moving off CSS files was a game changer, but the docs are missing a lot of examples on how to customise certain things

Hi, is there a possibility to conditionally add a font? I have a multitenant setup, and for different client UI's, we support client specific fonts. In client A's app, I only use client A's font. But embedding fonts this way downloads client B's font as well even though it is not used.

Can't get local fonts to load at all.. just flat out refusing to do it. Using Vite, npm run dev for the server and tried using public file in root. No matter what I do, it's not loading the fonts

very good video 🥰🥰

Hi I m facing the pb of display I want to show in lg screen of image and mobile devices I want to show hidden of image "hidden md:block " I used but doesn't work show this kind of pb how to solve if possible as soon as reply for this question

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

how to avoid expected behaviour issue, as my custome fonts loads after the default font?

when using with nextjs and self hosted fonts , i had to put link in head tag as well.

And local fonts, but as utility classes? Thats what im looking for

What are the font and theme you use?

How to add fonts in next js.

Hi, thanks for the great tips, I'm kinda new to this, my font changed when I added it to the app.css file not the tailwind.config.js, I'm kind of wondering what happened :D

can anyone tell me how to set up truetype font in project with tailwindcss?

We want more such videos Plz reply this post if you want more

Hi. Does anybody know how to include the css of a third party library like slick slider into a tailwind project?

Haha, amazing...how do you say that again Wes? vit? veet? lol

Is it possible to use without tailwind config file , more preciously in new tailwind cli jit mode which doesn't require config file??

I need to know the vscode theme being used in this video🙃

I just wanna know what font do u use in your text editor?

Anyone struggling with using the next font optimisation with tailwind - In _app file declare the font as a jsx style css variable. And use that variable in the tailwind config file

Really very good video! I'll start implementing the fonts this way. On the other hand, does anyone know how to include style that should be in regardless of whether their classes are in the HTML or not? It happens that I apply style to a carousel but it only exists when the page loads, so the purged css does not contain the style

which font do you use in Visual Code ?

From what Tailwindcss version does this work? Does it work in 2.0 or 2.2 onwards?

1:00 eyo!

Sweet 😎

What font is he using in his code editor ? Any help here

What's the text editor font are you using 🙏?

8:15

0:53 tujhe malum hai tu kya bolra hai😂

First

Bye bye bootstrap 🤣

Beet