Issue while displaying heading with California font on smaller screens | Next.js | Page 1

empty hollow May 30, 2023, 7:57 PM

#

Need more info. Where is the font hosted? What does your code look like? Are you using tailwind, or any other style libraries?
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts

#

Recreation steps would be helpful as well.

left tendon May 30, 2023, 8:05 PM

#

@font-face {
font-family: 'California';
src: url('/fonts/California-woff2.woff2') format('woff2');
/* src: url('/fonts/California-woff.woff') format('woff'); */
font-display: swap;
}

@font-face {
font-family: 'ApexNewBook';
/* src: url('/fonts/ApexNew-Book.woff') format('woff'); */
src: url('/fonts/ApexNew-Book.woff2') format('woff2');
font-display: swap;
}

.heading {
font-family: 'California'; /* Make sure this font is available /
text-align: center;
margin-bottom: auto; / optional: add some space below the heading */
margin-top: 150px;
display: inline-block;
font-family: 'California';
font-size: 2.8em;
font-display: swap;
}

#

This is how I'm using it

#

Using css file for the moment

empty hollow May 30, 2023, 8:06 PM

#

is the font in your public folder?

left tendon May 30, 2023, 8:07 PM

#

Yes

#

home code

#

#

Whole structure

#

Is there an issue with the global.css?

#

If its ok with you can we talk in private? @empty hollow ?

#Issue while displaying heading with California font on smaller screens