How to add roboto font family in tailwind css?

@darrion.kuhn 

To add the Roboto font to Tailwind CSS, you need to customize the font family settings in your Tailwind configuration file. Here's how you can do it:

1. Open your Tailwind configuration file (usually named tailwind.config.js or tailwind.js).
2. Locate the theme object and add a fontFamily property to customize the font families. Here's an example of how you can add the Roboto font family:

1
2
3
4
5
6
7
8
9

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['Roboto', 'sans-serif'],
      'serif': ['Roboto Slab', 'serif'],
      'mono': ['Roboto Mono', 'monospace'],
    },
  },
}

1. Save the configuration file.
2. If you haven't already, make sure you have the Roboto font added to your project. You can do this by including a link to the font in your HTML file like so:

1

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">

1. Restart your development server to apply the changes.

Now, you can use the Roboto font family in your Tailwind CSS styles by applying the font-sans, font-serif, or font-mono utility classes to your HTML elements. For example:

1

<h1 class="font-sans">Hello, world!</h1>

Note: Make sure to replace Roboto, Roboto Slab, and Roboto Mono with the actual font names you want to use in your project.