Let’s start by adding link of font family in our head tag.
<head>
...
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
...
</head>
<body>
<h1>Custom Font</h1>
</body>In this example, we are using roboto font family. But if you check right now on the browser, you will see that it didn’t effect on our texts.
Now open tailwind.config.js file and extend theme with fontFamily. Next, give a key name you want to use and pass font family name as value in array.
tailwind.config.cjs
theme: {
extend: {
fontFamily: {
roboto: ["Roboto"],
},
},
},Now to use this font family in your project, just add class name roboto prefix with font in your h1 tag .
<h1 class="font-roboto">Custom Font</h1>Adding default fontFamily in your project
In your tailwind.config.js file, require tailwindcss/defaultTheme and pass it as second value in array
tailwind.config.cjs
const defaultTheme = require("tailwindcss/defaultTheme");
...
theme: {
extend: {
fontFamily: {
roboto: ["Roboto", ...defaultTheme.fontFamily.sans],
},
},
},This will set default font-family in your project.