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>

score 9 · Accepted Answer · answered Mar 23 '22 at 16:51

9

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

answered Mar 23 '22 at 16:51

Muhammad Gata

281
1
4

Thank you, how to use roboto regular? Now I just use class="font-roboto" – Mar 23 '22 at 17:52
yeah after the above configuration, you can call class font-roboto in your label tag – Muhammad Gata Mar 24 '22 at 01:55

score 0 · Answer 2 · answered Mar 23 '22 at 15:29

0

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;
}

answered Mar 23 '22 at 15:29

Reinier68

2,450
1
23
47

Thank you, how to use roboto regular? Now I just use `class="font-roboto"` – Mar 23 '22 at 17:52
Do you mean the font-weight? In that case you can just use `font-normal`, see here: https://tailwindcss.com/docs/font-weight – Reinier68 Mar 24 '22 at 11:18

How to add roboto font family in tailwind?

2 Answers2