How to setup google fonts in next 13 with tailwind css

Показать описание

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

Рекомендации по теме

Комментарии

Thanks man! I love your videos, it's fast but not fast enough to make it hard to understand and not slow enough to make me feel sleepy, your videos are precise and explains the connections/relationship between different things!

cemyxbv

Best thing I did on youtube was subscribing web dev cody. He really makes you understand things through different angles and test in real time and help us visualize. Thank you cody.

aryandhakal

thanks man, i was loosing my mind when I was adding the custom font family at the tailwindcss config file, then it worked when I just inserted with the variable options

Kolpaja

Thank you very much!! After wasting 2 to 3 hours. Found the perfect solution!!

owaissonija

So glad you put the github link above... stoked to know your account is private!!

andyfifedenim

Next 14 changes and simplify-it. U don't need to use variables anymore, instead, just pass it in _app or layout like: FontName.className check the official docs for reference. Also, u don't need themeDefault, just add sans: and a array with your imported fonts and u're good to go! How to use below:

import { Montserrat } from 'next/font/google'

const montserrat = Montserrat({
subsets: ['latin'],
})

<main className={Tw('text-primary bg-gray-50', montserrat.className)}>

TWconfig:

fontFamily: {
sans: ['Montserrat', 'ui-sans-serif', 'system-ui'],
},

Great video and always could work, good to keep it! 🤘

marceloviannadev

Weird thing I observed is that Next.js fonts don't load when page initially renders (falls back to default fonts, even though I can see the font variable being applied). When I refresh the page, only then they load. This is the case for dev and production. In dev this also happens when I toggle device toolbar in devtools.

sincethatmoment

What if we want to use multiple fonts throughout our app, for example a heading ad body font. How do we pass that through to all of our pages/components?

slunkeh

NextFonts work only under laboratory conditions, that is, when you don't make any changes to the babel.js configuration file. And let's be honest - the default babel.js configuration file is used only in todo-list applications.

cienk

we are waiting for the react coding challenge series videos, why do u stop it ?

amershboul

I can't insert this theme and font! There's no way to download this? I put everything correctly...

miguelcosta

You can directly interpolate nextfont with tailwind utility className without defining it as a custom variable in module export. ex- <main className= {`${sofia.className} bg-black text-white`}>

shivanshubisht

Hi there thank you!. The only way I made it work was just by using <html lang="en" className={sofia.className}> using the variable approach with tailwind didn't take the font at all. I have latest version of both packages Nest & TailwindCss

abelmurua

How to setup google fonts in next 13 with tailwind css

How to Add Google Font to HTML Website

How to install Google fonts on windows 10, 8.1,7 PC | Google Fonts Installation on Windows PC

How to Use Google Fonts 2023

How to Download Google Fonts to Use with Your Other Applications

Self-hosting fonts explained (including Google fonts) // @font-face tutorial

How To Use Google Fonts In VS Code (2024) Guide

Google Fonts lokal einbinden - mit einem Klick!

Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)

Install 500+ One UI Fonts on ALL Samsung Galaxy For FREE! - WORKING Method 2024

Google Fonts Extension for VS Code

How to Add Google Fonts in Wordpress Theme | Wordpress Google Fonts

Add a Google Font to Tailwind CSS | 2023

Google Fonts: How to Get Them All on Your Desktop

How to Easily Add Google Fonts to MS Word, Powerpoint, Windows

Adding Google Fonts to WordPress with Gutenberg 💡

How to Install Google Fonts on Your WordPress Website

How to Install & Use Google Fonts in Windows PC (Word, Excel, Photoshop)

3+ Ways to Add Google Fonts To WordPress

How to Add Google Fonts in React Js || How to Add Font-Family in React Js

How to Add Google Font in Adobe XD in 2 min

How to Install Custom Fonts in Google Docs!

WordPress Self Hosted Google Fonts Tutorial 2020 - How To Host Google Fonts Locally On WordPress

How to setup google fonts in next 13 with tailwind css

13 | HOW TO IMPORT NEW FONTS USING HTML | 2023 | Learn HTML and CSS Full Course for Beginners