Support customizing the `variable` when using each font

[mririgoyen]

Font Name (Geist Sans/Geist Mono):

• Geist Sans
• 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:

1. 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]

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

[SaadBazaz]

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",
})