First, I recognize that this isn’t really a Builder issue, it’s a question for the community to see how they’ve overcome this issue.
I’m trying to implement @next/font using Next.js 13.3 and I’m realizing the problem is that when using @next/font, a variable font-family name is generated. I can see that name when I target my preview builds with the migration to @next/font, but as it is a variable name, I have no confidence that it won’t change down the road and break my typography styling.
For more detail, I’m using both a local font (CircularXXWeb) and a Google font (Inter) on my site. Circular now shows up as circular-cu843 and it’s visible in Builder when I target localhost, but that name is potentially going to change every deployment. Next provides a way to set it as a CSS Variable, but I don’t know if that would work with the content coming down from Builder.
Has anybody attempted to tackle this yet?
Hi @chtbks-jason,
Any fonts already installed in your site’s CSS automatically work with Builder and Builder Theme Studio–you do not need to add them separately. In case that doesn’t work, you also have the option to import them in the builder Adding Custom Fonts
Let us know if you have any other questions. Thank you!
@manish-sharma Thank you. As I stated, I’m seeing the fonts in the Visual Editor. The issue here isn’t that Builder isn’t loading them, it’s that the font-family name will change unpredictably due to how next/font loads.
It autogenerates a class name that is variable which is where the difficulty comes in. I’m thinking I’m going to have to just switch to using all Custom Components that have the font-name correct.
Hi @chtbks-jason,
Thanks for the clarification, I think using custom components with the next font variable could be a good solution, otherwise, if there is a way to create a CSS class with the next font variable, then you can possibly add those class names within the builder editor to make sure fonts are consistent in case changed.
Ooo, I hadn’t thought about that option. I might just give that a shot and see how it goes.
Sure, let us know how that works for you. Thank you!
