actualizando mi pregunta ya que ahora he encontrado una solución parcial.
Estoy tratando de hacer referencia a una fuente importante usando un archivo local.
Hasta ahora he configurado tailwind.config.js como tal:
module.exports = { content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: { fontFamily: { poppins: ['Poppins', 'sans-serif'], adelia: ['ADELIA', 'cursive'], }, }, }, plugins: [], };mi globals.css se ve así:
@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"); }y la referencia dentro del componente en sí se ve así:
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%; } `¡Eventualmente, quiero hacer un componente con más estilo, cada uno haciendo referencia a más fuentes personalizadas!
Aquí está mi estructura de archivos:
ingrese la descripción de la imagen aquí
Gracias
en global.css primero tenemos que importar la fuente local y luego también agregar tailwind.config.js .
// 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;porque funciona totalmente bien si lo usas así
<span className='font-adelia'>Hewlo Standard</span>Debe definir @font-face para sus fuentes y no solo importar.
@layer base { @font-face { font-family: 'Poppins'; font-weight: 400; src: url('../assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype'); } }