Mastering Fonts in Next.js: Local Fonts, Google Fonts, and Best Practices
GitHub: github.com/coderyansolomon/ne...
Dive into the world of font optimization with this comprehensive Next.js tutorial! In this video, we demystify the process of enhancing your web application's performance and aesthetics by exploring both local font integration and Google Fonts integration. From seamless implementation techniques to essential best practices, you'll learn how to effortlessly elevate your typography game while ensuring fast loading times. Unlock the secrets to creating visually stunning and lightning-fast websites with our in-depth guide to font optimization in Next.js.
If you're into fitness and growing muscle, make sure to check out my other channel / @schoolofmuscle
Пікірлер: 29
Was troubleshooting with next js fonts variable to use in CSS. You saved my time. Thanks a lot. Keep it up
Can't wait for another fullstack build but with typescript. I needed this too. Subbed. Thanks 👍
@coderyan
9 ай бұрын
You’re welcome. Thanks!
thanks, the global font settings for google font was very useful! i struggled with that for hours
@coderyan
7 ай бұрын
Happy it helped!
So I got this to work, but then how do I style that element that I've given ? by targetting .dancingScript ?
How did he get the static font with that extension
for some reasons, when i set the variable fonts in side the classNames, it makes the component's font the name of the last font in the className list, i don't know if you get me
Thank you for your great and comprehensive explanation.
@coderyan
Ай бұрын
You’re welcome
Thank you for such an amazing video.
@coderyan
3 ай бұрын
You’re welcome
thanks , you helped me :)
@coderyan
Ай бұрын
Happy to hear it
what is the purpose of display: swap?
Great content bro!
@coderyan
5 ай бұрын
Thank you!
thanks for your great content
@coderyan
9 ай бұрын
You’re welcome!
thanks you are life saver
@coderyan
6 ай бұрын
You’re welcome!
how could i do it with scss? and is there a way to not make it so my all page change to those fonts unless i actually go there and use a font-family to change it? cause putting that into the body will change every text that is not styled with a font-family to that exact font
@micatalyst
7 ай бұрын
wait ok so if i change the .classname to .variable it doesn't aply globaly but only aplies it locally within the scope of the css that has that same variable. but still how could i change it to work with scss ? please
Very beneficial 👌👌👌
@coderyan
9 ай бұрын
Happy to hear it!
Nice comprehensive tutorial. I f*ck with it 👍💯
@coderyan
4 ай бұрын
Thanks!
U look so much like Reece James man. what the heck!?
I didn't like the way fonts are used in next js... why shall we need to use classname={`${roboto.variable}`}... it's annoying to use fonts in every elements... fonts should be kept of css globally so that we can use them throughout the site... don't know whether I am wrong or not... but it's to much....