How to add roboto font family in tailwind?

Question

How to add roboto font family in tailwind and us it for label element?

<label class="font-roboto"></label>

Answer 1

you can put import font in main.css, and add via tailwind.config.js

 module.exports = {
  theme: {
    fontFamily: {
      'sans': [your_main_font],
      'roboto': ['Roboto', 'sans-serif'],
    }
  }
}

you can see in the documentation on how to add google in tailwind css font here,

https://tailwindcss.com/docs/font-family#customizing-your-theme

Answer 2

This has not much to do with Tailwind. Just import the font from Google fonts, and use it throughout your application. So for instance:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');

html, body, label {
  font-family: 'Roboto', sans-serif;
}