Support customizing the `variable` when using each font

mririgoyen commented 8 months ago

Font Name (Geist Sans/Geist Mono):

[x] Geist Sans
[x] Geist Mono

Description of the Issue: Each font emits it's own variable, --font-geist-sans and --font-geist-mono. We would like to override those to something custom. In our case, we need them to be more generic, such as --font-headings.

Steps to Reproduce:

Use the fonts.

Expected Behavior: Including the font allows for manual overriding the variable.

Additional Context: I understand I can manually use localFont and build up the configuration, this would be more of a convenience feature.

JohnPhamous commented 8 months ago

Thanks for the feedback. We will improve the API for the fonts soon!

SaadBazaz commented 8 months ago

Exactly what I'm looking for too.

Perhaps can be used as a constructor as well, like other fonts?

const fontHeading = GeistSans({
  subsets: ["latin"],
 weights: [800],
  variable: "--font-heading",
})

vercel / geist-font

Support customizing the `variable` when using each font #40