fix(generate)!: remove auto naming suffixes of variable packages (#950)

* fix!: remove auto naming of variable package

* Create spicy-crabs-matter.md

* fix(cli): variable family names should be explicit

* Create nasty-yaks-fry.md

.changeset/nasty-yaks-fry.md

@@ -0,0 +1,5 @@
+---
+"@fontsource-utils/cli": patch
+---
+
+fix(cli): use explicit naming for variable font families

.changeset/spicy-crabs-matter.md

@@ -0,0 +1,5 @@
+---
+"@fontsource-utils/generate": major
+---
+
+fix(generate)!: remove auto naming suffix of variable packages

packages/cli/src/google/css.ts

@@ -270,7 +270,7 @@ export const generateVariableCSS = (
 
 			for (const subset of Object.keys(variant[style])) {
 				const fontObj: FontObject = {
-					family,
+					family: `${family} Variable`,
 					style,
 					display: 'swap',
 					weight: findClosest(weights, 400),
@@ -459,7 +459,7 @@ export const generateIconVariableCSS = (
 
 			for (const subset of Object.keys(variant[style])) {
 				const fontObj: FontObject = {
-					family,
+					family: `${family} Variable`,
 					style,
 					display: 'swap',
 					weight: Number(axes.wght.default),

packages/generate/src/index.ts

@@ -16,7 +16,7 @@ const generateFontFace = (font: FontObject) => {
 	// If variable, modify output
 	const { wght, stretch, slnt } = variable ?? {};
 	let result = '@font-face {';
-	result += `${spacer}font-family: '${family}${variable ? ' Variable' : ''}';`;
+	result += `${spacer}font-family: '${family}';`;
 
 	// If slnt is present, switch to oblique style
 	result += `${spacer}font-style: ${

packages/generate/tests/generate.test.ts

@@ -83,7 +83,7 @@ describe('generate font face', () => {
 
 	it('should generate a single font face with variable wght', () => {
 		const font = {
-			family: 'Open Sans',
+			family: 'Open Sans Variable',
 			style: 'normal',
 			display: 'swap',
 			weight: 400,
@@ -104,7 +104,7 @@ describe('generate font face', () => {
 
 	it('should generate a single font face with font stretch', () => {
 		const font = {
-			family: 'Open Sans',
+			family: 'Open Sans Variable',
 			style: 'normal',
 			display: 'swap',
 			weight: 400,
@@ -128,7 +128,7 @@ describe('generate font face', () => {
 
 	it('should generate a single font face with slnt axis', () => {
 		const font = {
-			family: 'Open Sans',
+			family: 'Open Sans Variable',
 			style: 'normal',
 			display: 'swap',
 			weight: 400,
@@ -152,7 +152,7 @@ describe('generate font face', () => {
 
 	it('should generate a single font face with all variable axis', () => {
 		const font = {
-			family: 'Open Sans',
+			family: 'Open Sans Variable',
 			style: 'normal',
 			display: 'swap',
 			weight: 400,