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:
Thank you
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>
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');
}
}