Tailwind CSS Tutorial #6 - Custom Fonts

In this tailwind css tutorial we'l take a look at how to use custom fonts with tailwind using our config file.

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Other Related Free Courses:

[jaksa_vl]

Great video!


If anyone has problems changing the font, I managed to do it by setting a class of font-body instead of putting it by itself

[SamSam-rglk]

dude your tutorials are awesome (css, js, firebase...) i watched them all

[stewartmuhanuzi]

To keep watching any changes made and automatically reloading, you can add `watch-css": "tailwindcss -i src/styles.css -o public/styles.css --watch` as a script and simply run `npm run watch-css`.

[mirnatul]

Now it's 100% clear ❤❤. Programmers still survives for this type of people. Thank you❤.

[pankajsah]

one of the most helpul videos all tailwind concepts cleared . Thanks

[larissacavalcante]

thanks, man.
I'm learning tailwind along with front-end, and this was vary helpful

[fcomor]

Thank's!
I am starting a project with tailwing and this helped me a lot.
Subscribed!

[stocklin]

1:30 choose google fonts - Nunito
2:15 import source css

[rodesnzie]

your are the best teacher in youtube 😊😊😊

[justforcode]

If you are having problems with the font you can try to change the script we wrote in package.json to:


This one has -i, this is for the new version.

[sakshamkapoor]

Hey, i think you included this video twice in the playlist, instead of the flex box one. Great Content btw <3

[akhadtop]

I've been looking since yesterday,
this one truely did show me, THANK YOU SIR

[Shakeel]

Great tutorial series to learn tailwind css!!

[abelmurua]

In my case (as today) I couldnt make it work unless I added another font next to Nunito. Like: nunito: ['Nunito', 'sans-serif'],

[ttt]

the syntax is dfferent now in the new version tailwind

[PBUK]

Am I the only person who uses the npm scripts tab bottom left of vsCode?? Saves opening up a terminal manually and typing the run build script

[unknowperson]

not working for me. it shows on Chrome devs that is set to Nunito, but the font itself isnt Nunito

[shounakchavan]

What is that array of values for the `sans` and `serif` property ? How do I use let's say Roboto with `sans` or any other value of the array ?

[sirbacharach]

Hi, when I first load my page, another font pops up briefly before my chosen font, is there any way to stop this default behaviour? I'm using React.

[gabrielvelasquez]

Just in case your font doesnt work you can wrap it like this with an apostrophe

fontFamily: {
baloo: ['"Baloo Tammudu 2"']
},