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) 😉
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
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
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...
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.
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"); }
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
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.
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
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
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.
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
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.
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
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.
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
@@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.
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
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
For that one person who is under a time crunch
Embedding Google Fonts: 0:37
Self Hosted Fonts: 7:22
life saver bro
Man, thanks for not monetizing this great channel
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) 😉
Totally, that would have been a great addition to this video 👍
Actually this brings FOUT back by design!
@@robyroby162 Sorry, I meant FOIT (Flash of Invisible Text). Thanks for correcting me!
8:13 looool. Big shoutout to Mr. Wes Bos out there.
Haha I was waiting for those comments 😅
Your vídeos are really uplifting, love your attitude.
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
I cannot believe this thing wth is going on laws...
Tailwind is the future
The future is Tailwind *
And the future is now!
@@81NARY 👀
And I'm from future
Amazing video! super direct and to the point!! love this.
Woohoo! Simon is winning at CSS and Year 4 Miniball! Division 1 no less!
When Tailwind CSS Merch?
Primus Utilitatem
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
Learning Tailwindcss and just wanted to say thanks for the reminder. Was totally like "why ins't this working." and forgot the rebuild. :)
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!
This comment should be pinned. You have saved me from wasting hours trying to figure out why it didn't work. Thank you!
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...
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.
I just googled for this yesterday!!
Yeah, me too 😁
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");
}
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
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.
@@TailwindLabs Oh I meant without CSS files! 😅
By defining font-faces in a custom plugin for the tailwind config
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
me too😢
Thanks this helps a lot!
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?
Thank you my website is one step closer!
Please can you do a video explaining css layout for beginners
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
I wish you provide html source together. I wonder how the regular / bold font applied to css.
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.
Would you have to define all the weight classes so that Tailwind behaves accordingly with the font weight utility classes?
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
How do make the imported custom font the global default font? Thank you.
how to avoid expected behaviour issue, as my custome fonts loads after the default font?
PRICELESS! Thanks 😉
how can we use variable fonts?
Thanks again!
when using with nextjs and self hosted fonts , i had to put link in head tag as well.
just awesome
I have a question, while you are using the jit kit fo you need a css folder too
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.
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
🔥🔥🔥
So epic once again.
what is the name of this font that in the VS Code????? if u know let me know
Hi. Does anybody know how to include the css of a third party library like slick slider into a tailwind project?
what is font-family in the text-editor
monolisa font
Its DankMono, its paid.
@@anirudh1713 yup it's dank mono..! Check the 'f' its unique ..!
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.
@@marcorieser will check it
very good video 🥰🥰
Subscribed and liked!!
can anyone tell me how to set up truetype font in project with tailwindcss?
Is it possible to use without tailwind config file , more preciously in new tailwind cli jit mode which doesn't require config file??
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.
We want more such videos
Plz reply this post if you want more
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
How to add fonts in next js.
What are the font and theme you use?
And local fonts, but as utility classes? Thats what im looking for
I need to know the vscode theme being used in this video🙃
The theme is Night Owl, and the font is Dank Mono ✨
I just wanna know what font do u use in your text editor?
Dank Mono
From what Tailwindcss version does this work? Does it work in 2.0 or 2.2 onwards?
Since v1
It was already working in v1, we just haven't provided many examples until now 👍
@@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.
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
What font is he using in his code editor ? Any help here
operator mono
@@janascofield Will check it out. Huge thanks
which font do you use in Visual Code ?
operator mono
What's the text editor font are you using 🙏?
Dank Mono
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
Haha, amazing...how do you say that again Wes? vit? veet? lol
Sweet 😎
1:00 eyo!
0:53 tujhe malum hai tu kya bolra hai😂
8:15
Bye bye bootstrap 🤣
First
Beet