Tailwind css laravel mix add fonts

user_9627798 0
Viewed 3182

I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?

laravel-mix tailwind-css laravel
2 Answers

Connect the font to the project (as you usually do) and just add your font to tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
     'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
     'serif': ['Georgia', 'Cambria', ...],
     'mono': ['SFMono-Regular', 'Menlo', ...],
     'your-font': ['Your Font', ...]
    }
  }
}

https://tailwindcss.com/docs/font-family/#app

user_139185070

tailwind.config.js :

theme: {
    extend: {
        fontFamily: {
            body: ['Rowdies']
        }
    }
  },

css\app.css

@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');

shell:

npm run dev
or 
npm run watch

now you can use .font-body class in any tag that you want for example:

<body class="font-body">
  <h1>Hello World!</h1>
</body>

font + body = font-body

fontFamily: {
            body: ['Open Sans']
        }

(you can change body)

user_110389060
Related