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

  • @muhammad-shahin
    @muhammad-shahin2 ай бұрын

    Was troubleshooting with next js fonts variable to use in CSS. You saved my time. Thanks a lot. Keep it up

  • @jeremiebinns
    @jeremiebinns9 ай бұрын

    Can't wait for another fullstack build but with typescript. I needed this too. Subbed. Thanks 👍

  • @coderyan

    @coderyan

    9 ай бұрын

    You’re welcome. Thanks!

  • @RT-yg6ec
    @RT-yg6ec7 ай бұрын

    thanks, the global font settings for google font was very useful! i struggled with that for hours

  • @coderyan

    @coderyan

    7 ай бұрын

    Happy it helped!

  • @Adjust91
    @Adjust914 ай бұрын

    So I got this to work, but then how do I style that element that I've given ? by targetting .dancingScript ?

  • @ibukunoluwadawodu1019
    @ibukunoluwadawodu10193 ай бұрын

    How did he get the static font with that extension

  • @sadique_x_
    @sadique_x_8 ай бұрын

    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

  • @kamrant8915
    @kamrant8915Ай бұрын

    Thank you for your great and comprehensive explanation.

  • @coderyan

    @coderyan

    Ай бұрын

    You’re welcome

  • @naveedalirehmani4135
    @naveedalirehmani41353 ай бұрын

    Thank you for such an amazing video.

  • @coderyan

    @coderyan

    3 ай бұрын

    You’re welcome

  • @madjidsmail5684
    @madjidsmail5684Ай бұрын

    thanks , you helped me :)

  • @coderyan

    @coderyan

    Ай бұрын

    Happy to hear it

  • @yukiritosurada8392
    @yukiritosurada83923 ай бұрын

    what is the purpose of display: swap?

  • @shubhankarvalimbe5286
    @shubhankarvalimbe52865 ай бұрын

    Great content bro!

  • @coderyan

    @coderyan

    5 ай бұрын

    Thank you!

  • @tseringlama2146
    @tseringlama21469 ай бұрын

    thanks for your great content

  • @coderyan

    @coderyan

    9 ай бұрын

    You’re welcome!

  • @rafshanulhoquesiam4639
    @rafshanulhoquesiam46396 ай бұрын

    thanks you are life saver

  • @coderyan

    @coderyan

    6 ай бұрын

    You’re welcome!

  • @micatalyst
    @micatalyst7 ай бұрын

    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

    @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

  • @ammarhaidar5995
    @ammarhaidar59959 ай бұрын

    Very beneficial 👌👌👌

  • @coderyan

    @coderyan

    9 ай бұрын

    Happy to hear it!

  • @serispeaks
    @serispeaks4 ай бұрын

    Nice comprehensive tutorial. I f*ck with it 👍💯

  • @coderyan

    @coderyan

    4 ай бұрын

    Thanks!

  • @angelofdeath2332
    @angelofdeath23324 ай бұрын

    U look so much like Reece James man. what the heck!?

  • @anirudhachakrabarty2050
    @anirudhachakrabarty20507 ай бұрын

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