How to Use Custom Fonts with Tailwind CSS

[@KingOfCorinth]

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

[@N32-e1g]

life saver bro

[@hmatpin]

Man, thanks for not monetizing this great channel

[@codenameunknown3791]

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

[@simonswiss]

Haha I was waiting for those comments 😅

[@kayf7073]

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

[@moracabanas]

I cannot believe this thing wth is going on laws...

[@JimOHalloran]

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

[@mohabedr5030]

Tailwind is the future

[@Max-xp3tf]

The future is Tailwind *

[@81NARY]

And the future is now!

[@Max-xp3tf]

@@81NARY 👀

[@nitro4109]

And I'm from future

[@saschamajewsky7990]

When Tailwind CSS Merch?

[@ruslansteiger]

Primus Utilitatem

[@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

[@melissawhite7522]

Learning Tailwindcss and just wanted to say thanks for the reminder. Was totally like "why ins't this working." and forgot the rebuild. :)

[@shivankbatra5643]

thanks a lot man, 5hr for me to be precise and was about to give up before I saw this comment. Feeling really stupid but finally it works!

[@yassminh]

This comment should be pinned. You have saved me from wasting hours trying to figure out why it didn't work. Thank you!

[@davidluhr]

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) 😉

[@simonswiss]

Totally, that would have been a great addition to this video 👍

[@robyroby162]

Actually this brings FOUT back by design!

[@davidluhr]

@@robyroby162 Sorry, I meant FOIT (Flash of Invisible Text). Thanks for correcting me!

[@pedromartindelcampogonzale9613]

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

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

[@justinoneill2837]

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.

[@ovuokeaghwotu2389]

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

[@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: 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"); }

[@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

[@mattd5419]

how can we use variable fonts?

[@DrHappybone]

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

[@rickdev1922]

me too😢

[@arianhossain9600]

what is the name of this font that in the VS Code????? if u know let me know

[@TheKumarAshwin]

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

[@govindsaini8085]

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

[@momenabdelghafar7771]

what is font-family in the text-editor

[@HosamHasanMonir]

monolisa font

[@anirudh1713]

Its DankMono, its paid.

[@modz9711]

@@anirudh1713 yup it's dank mono..! Check the 'f' its unique ..!

[@marcorieser]

I think it's MonoLisa, they released version 1.8 yesterday which adds a script variant that gives you a similar look like Dank Mono.

[@modz9711]

@@marcorieser will check it

[@edanbenatar]

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

[@mike110111]

Please can you do a video explaining css layout for beginners

[@abdullahialhassan3700]

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

[@jobsphil9553]

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

[@nbbhaskar3294]

Either font-bold tailwind class can be added to your html element. Or in @font-face declaration in your css file, you can specify font-weight: 700 and point src to the bold font file, that should it.

[@muskanbhatnagar7535]

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.

[@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?

[@irving7653]

What are the font and theme you use?

[@oliverye55]

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

[@lawrencemotions8720]

How to add fonts in next js.

[@nozimjonjuraev2666]

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

[@varun_y]

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

[@hmatpin]

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

[@joshuarileymagic]

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

[@mychoppaeat]

1:00 eyo!

[@esdev]

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

[@simonswiss]

If you want a custom "font-${fontName}" utility class, you'll need a Tailwind config file. You can still use a custom font and set it in CSS on the HTML elements you want to target.

[@aaymankhalid9997]

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

[@simonswiss]

The theme is Night Owl, and the font is Dank Mono ✨

[@Keteku.]

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

[@janascofield]

operator mono

[@Keteku.]

@@janascofield Will check it out. Huge thanks

[@guilhermeeduardomaffei1247]

which font do you use in Visual Code ?

[@janascofield]

operator mono

[@JamisIcon]

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

[@christyjacob8551]

I just googled for this yesterday!!

[@kelas-frontend]

Yeah, me too 😁

[@phonghoanggia9181]

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

[@alessandro2092]

Dank Mono

[@tomrowe2181]

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

[@TailwindLabs]

This example was made in 2.2! The exact same technique has been working since v1 by the way, there is nothing different about adding custom fonts to Tailwind since version 2.2.

[@tomrowe2181]

@@TailwindLabs Oh I meant without CSS files! 😅 By defining font-faces in a custom plugin for the tailwind config

[@sherifsaleh111]

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

[@alessandro2092]

Dank Mono

[@en3rr]

Thanks this helps a lot!

[@The_Penny_Seventeens]

Thank you my website is one step closer!

[@bogdanlupu3679]

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

[@wobsoriano]

Since v1

[@simonswiss]

It was already working in v1, we just haven't provided many examples until now 👍

[@bogdanlupu3679]

@@simonswiss thanks. I am new on tailwind and i plan to use in a project that nas custom fonts. The codebase vad installed 2.0. That's why the question. Thanks again for the answer.

[@OneBrokeBloke]

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

[@Ravi0207]

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

[@CARUSAR21]

So epic once again.

[@ch3tankate469]

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

[@cas4425]

🔥🔥🔥

[@oliverye55]

Subscribed and liked!!

[@BneiAnusim]

PRICELESS! Thanks 😉

[@codeative]

just awesome

[@lautaroriveiro]

Thanks again!

[@adeema664]

very good video 🥰🥰

[@waldothedev]

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

[@TheCrisisCall]

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

[@parth.dobariya]

0:53 tujhe malum hai tu kya bolra hai😂

[@esdev]

Sweet 😎

[@mikefenn2451]

8:15

[@haridass2208]

Bye bye bootstrap 🤣

[@vic_casanas]

First

[@shaungbhone8368]

Beet