CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Maxime Ghéraille
Maxime Ghéraille

Reputation: 1895

apply custom fonts to all elements on all pages

I am trying to add a custom font for all elements, so that I do not have to specify it on every text element with a className

this is what I have:

A folder with all the ttf files for the font.

my tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'theme_white': '#a4a7b5',
        'theme_black': '#121212',
      },
      fontFamily: {
        'body': ["'Fira Sans Extra Condensed'"]
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

this is in my own css, to apply it to all element inside the body (if I am not wrong)

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    body {
        @apply font-body;
    }
}

If I specify the className 'font-body' on an element it works but when specifying nothing and I look at the dev tools, I can see the css applied.

enter image description here

but when looking at the font I know it is the wrong one and I can see it because it is the wrong rendered one

enter image description here

any idea on how to make it work ? thx

Upvotes: 0

Views: 962

Answers (1)

kirillman
kirillman

Reputation: 79

Try to import your font at your css file like this

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap');

and in tailwind config specify like this

body: [ "'Fira Sans Extra Condensed'", 'sans-serif' ]

This solution worked for me

Upvotes: 1

Related Questions