Currently, I am in the process of developing a website using NuxtJS along with Tailwind CSS for styling. To incorporate my desired fonts, I have utilized the @nuxtjs/tailwindcss module.
Despite applying the correct font-family through CSS, it seems that my fonts are not loading in the browser as expected. Even though the devtools screenshot displays the appropriate font being used, the text on the browser still renders in Times New Roman.
I have stored my font files as .ttf files within a /assets/fonts/ directory located in the root of my project.
The contents of my tailwind.css file are as follows:
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@font-face {
font-family: 'Montserrat';
font-weight: 400;
src: url('../fonts/Montserrat-Regular.ttf') format('ttf');
}
@font-face {
font-family: 'Montserrat';
font-weight: 700;
src: url('../fonts/Montserrat-Bold.ttf') format('ttf');
}
@font-face {
font-family: 'Montserrat';
font-weight: 900;
src: url('../fonts/Montserrat-Black.ttf') format('ttf');
}
Additionally, the configuration in my tailwind.config.js is configured like this:
module.exports = {
theme: {
fontFamily: {
sans: ['Montserrat'],
serif: ['Montserrat'],
mono: ['Montserrat'],
display: ['Montserrat'],
body: ['Montserrat']
},
// Additional theme customization
},
variants: {},
plugins: []
}
Upon conducting further investigation, I realized that simply extending Tailwind's base fonts may not yield the desired results. However, I do intend to clean up this implementation and utilize different fonts for specific texts once I find a suitable solution.
Although initial suspicions pointed towards Tailwind as the culprit, inspection via Devtools does show that Montserrat is indeed the computed font, and there have been no errors during the webpack build.
I have attempted the solutions provided in a relevant question on Stack Overflow (link here). While implementing the accepted answer, which mirrors my current setup, I have yet to achieve the desired outcome.
If anyone could offer assistance, I would greatly appreciate it!
UPDATE: I have created a Github repository to replicate the issue, available here. The README.MD contains detailed steps to reproduce the problem.