updating my question as I have now found a partial solution.

I am attempting to important / reference a font using a local file.

So far I have configured tailwind.config.js as such:

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        adelia: ['ADELIA', 'cursive'],
      },
    },
  },
  plugins: [],
};

my globals.css looks like this:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "ADELIA";
  src: url("../public/fonts/Format_1452.otf");
}

and the reference within the component itself looks like this:

export const SectionTitleHero = styled.h2`
  font-family: "ADELIA", sans-serif;
  font-weight: 800;
  font-size: ${(props) => props.main ? '85px' : '56px'};
  line-height: ${(props) => props.main ? '72px' : '56px'};
  width: max-content;
  max-width: 100%;
  margin-bottom: 16px;
  padding: ${(props) => props.main ? '58px 0 16px' : '0'};

  @media ${props => props.theme.breakpoints.md}{
    font-size: ${(props) => props.main ? '56px' : '48px'};
    line-height: ${(props) => props.main ? '56px' : '48px'};
    margin-bottom: 12px;
    padding: ${(props) => props.main ? '40px 0 12px' : '0'};
  }

  @media ${props => props.theme.breakpoints.sm}{
    font-size: 32px;
    line-height: 40px;
    font-size: ${(props) => props.main ? '28px' : '32px'};
    line-height: ${(props) => props.main ? '32px' : '40px'};
    margin-bottom: 8px;
    padding: ${(props) => props.main ? '16px 0 8px' : '0'};
    max-width: 100%;
  }
`

Eventually, I want to make more styled component, each referencing more custom fonts!

Here is my file structure:

enter image description here

Thank you

CodePudding user response：

You need to define the @font-face for your fonts and not just importing.

@layer base {
    @font-face {
        font-family: 'Poppins';
        font-weight: 400;
        src: url('../assets/fonts/Poppins/Poppins-Regular.ttf')
            format('truetype');
    }
}

CodePudding user response：

in global.css we have to first import the local font and then also add-on tailwind.config.js as well.

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "ADELIA";
  // make sure you have accurate path of your local font 
  src: url("../public/fonts/ADELIA.otf");
}

// tailwind.config.js
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        adelia: ['ADELIA', 'cursive'],
      },
    },
  },
  plugins: [],
};

// and use it like this
// with quotes or without quotes
font-family: "adelia", sans-serif;
// also try it like this too
font-family: adelia, sans-serif;

because it totally works fine if you use it like this

<span className='font-adelia'>Hewlo Standard</span>