@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 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
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet"> |
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.