diff --git a/packages/font/src/local/loader.ts b/packages/font/src/local/loader.ts
index ebae82e89b18876..15bcb649409033d 100644
--- a/packages/font/src/local/loader.ts
+++ b/packages/font/src/local/loader.ts
@@ -53,13 +53,13 @@ function getDistanceFromNormalWeight(weight?: string) {
 
 const fetchFonts: FontLoader = async ({
   functionName,
+  variableName,
   data,
   emitFontFile,
   resolve,
   fs,
 }) => {
   const {
-    family,
     src,
     display,
     fallback,
@@ -88,7 +88,7 @@ const fetchFonts: FontLoader = async ({
         ...(declarations
           ? declarations.map(({ prop, value }) => [prop, value])
           : []),
-        ['font-family', `'${fontMetadata?.familyName ?? family}'`],
+        ['font-family', variableName],
         ['src', `url(${fontUrl}) format('${format}')`],
         ['font-display', display],
         ...(weight ?? defaultWeight
diff --git a/packages/font/src/local/utils.ts b/packages/font/src/local/utils.ts
index 8706cf9005df778..a244f797ffe36a0 100644
--- a/packages/font/src/local/utils.ts
+++ b/packages/font/src/local/utils.ts
@@ -12,7 +12,6 @@ const extToFormat = {
 }
 
 type FontOptions = {
-  family: string
   src: Array<{
     path: string
     weight?: string
@@ -65,15 +64,11 @@ export function validateData(functionName: string, fontData: any): FontOptions {
     }
   }
 
-  let family: string | undefined
   src = src.map((fontFile: any) => {
     const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)?.[1]
     if (!ext) {
       throw new Error(`Unexpected file \`${fontFile.path}\``)
     }
-    if (!family) {
-      family = /(.*\/)?(.+?)\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)![2]
-    }
 
     return {
       ...fontFile,
@@ -99,7 +94,6 @@ export function validateData(functionName: string, fontData: any): FontOptions {
   }
 
   return {
-    family: family!,
     src,
     display,
     weight,
diff --git a/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs b/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs
index e6e123ec36fb160..d6a92447b833d54 100644
--- a/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs
+++ b/packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs
@@ -11,7 +11,11 @@ pub struct FontImportsGenerator<'a> {
 }
 
 impl<'a> FontImportsGenerator<'a> {
-    fn check_call_expr(&mut self, call_expr: &CallExpr) -> Option<ImportDecl> {
+    fn check_call_expr(
+        &mut self,
+        call_expr: &CallExpr,
+        variable_name: &Result<Ident, &Pat>,
+    ) -> Option<ImportDecl> {
         if let Callee::Expr(callee_expr) = &call_expr.callee {
             if let Expr::Ident(ident) = &**callee_expr {
                 if let Some(font_function) = self.state.font_functions.get(&ident.to_id()) {
@@ -48,6 +52,12 @@ impl<'a> FontImportsGenerator<'a> {
                         query_json_values
                             .insert(String::from("import"), Value::String(function_name));
                         query_json_values.insert(String::from("arguments"), Value::Array(json));
+                        if let Ok(ident) = variable_name {
+                            query_json_values.insert(
+                                String::from("variableName"),
+                                Value::String(ident.sym.to_string()),
+                            );
+                        }
 
                         let query_json = Value::Object(query_json_values);
 
@@ -81,7 +91,7 @@ impl<'a> FontImportsGenerator<'a> {
             };
             if let Some(expr) = &decl.init {
                 if let Expr::Call(call_expr) = &**expr {
-                    let import_decl = self.check_call_expr(call_expr);
+                    let import_decl = self.check_call_expr(call_expr, &ident);
 
                     if let Some(mut import_decl) = import_decl {
                         match var_decl.kind {
diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js
index 9ddf24e3974096d..95d8ec34da54c88 100644
--- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js
+++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js
@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export { inter };
diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js
index f54f3cf2f821364..0bb18ca8d624d21 100644
--- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js
+++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js
@@ -1,4 +1,4 @@
-import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}';
-import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}';
+import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter1"}';
+import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter2"}';
 var i = 10;
 var i2 = 20;
diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js
index a8c2866a10e41a9..7fac43692f14ad7 100644
--- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js
+++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js
@@ -1,7 +1,7 @@
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
 const a = fn({
     10: 'hello'
 });
diff --git a/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js b/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js
index 07ff833332e63f4..20ca40247accdb7 100644
--- a/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js
+++ b/packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js
@@ -1,2 +1,2 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]],"variableName":"inter"}';
 const a = fn(...{}, ...[]);
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js
index d834e14dc28e6ce..3d993f6e21af634 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js
@@ -1 +1 @@
-import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}]}';
+import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}],"variableName":"font"}';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js
index 9ddf24e3974096d..95d8ec34da54c88 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js
@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export { inter };
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js
index e011c842d8f2d5a..57f888312d33a2d 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js
@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export default inter;
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js
index a1a92848f288b0d..bf5f1094c6a92c8 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js
@@ -1,3 +1,3 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}],"variableName":"firaCode"}';
 import React from 'react';
 console.log(firaCode);
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js
index b7dc24e494f83cf..a20154bf62db740 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js
@@ -1,2 +1,2 @@
-import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}]}';
+import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}],"variableName":"acme1"}';
 import React from 'react';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js
index b79734b7ba114da..d492c40275e2f23 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js
@@ -1 +1 @@
-import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0]}';
+import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0],"variableName":"geo"}';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js
index 5541ae8803f1154..0131db587509ead 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js
@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
 import React from 'react';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js
index 3c6e3c26b2367ff..4f4bc102a82e07b 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js
@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}';
-import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}';
+import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}';
 import React from 'react';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js
index 086c584518d4d79..64a37fd15b34115 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js
@@ -1,3 +1,3 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
 import React from 'react';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js
index 040502437700b87..8ba10144df1bf08 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js
@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}';
-import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}';
+import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}';
 import React from 'react';
diff --git a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js
index 389ee70328dd537..79cb8a45bd77e6f 100644
--- a/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js
@@ -1 +1 @@
-import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[]}';
+import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[],"variableName":"fira"}';
diff --git a/packages/next/build/webpack/loaders/next-font-loader/index.ts b/packages/next/build/webpack/loaders/next-font-loader/index.ts
index 9d15aa7454f9189..8750532db6ed4bc 100644
--- a/packages/next/build/webpack/loaders/next-font-loader/index.ts
+++ b/packages/next/build/webpack/loaders/next-font-loader/index.ts
@@ -57,6 +57,7 @@ export default async function nextFontLoader(this: any) {
       path: relativeFilePathFromRoot,
       import: functionName,
       arguments: data,
+      variableName,
     } = JSON.parse(this.resourceQuery.slice(1))
 
     try {
@@ -67,6 +68,7 @@ export default async function nextFontLoader(this: any) {
       let { css, fallbackFonts, adjustFontFallback, weight, style, variable } =
         await fontLoader({
           functionName,
+          variableName,
           data,
           config: fontLoaderOptions,
           emitFontFile,
diff --git a/packages/next/font/index.d.ts b/packages/next/font/index.d.ts
index 85bdb05888a9291..ce4c25884e53e48 100644
--- a/packages/next/font/index.d.ts
+++ b/packages/next/font/index.d.ts
@@ -14,6 +14,7 @@ export type AdjustFontFallback = {
 
 export type FontLoader = (options: {
   functionName: string
+  variableName: string
   data: any[]
   config: any
   emitFontFile: (content: Buffer, ext: string, preload: boolean) => string
diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts
index 2e40797aa232df8..8768d8a966a4f45 100644
--- a/test/e2e/next-font/index.test.ts
+++ b/test/e2e/next-font/index.test.ts
@@ -108,7 +108,7 @@ describe('@next/font/google', () => {
         className: expect.stringMatching(/__className_.{6}/),
         style: {
           fontFamily: expect.stringMatching(
-            /^'__Fraunces_.{6}', system-ui, '__Fraunces_Fallback_.{6}'$/
+            /^'__myFont1_.{6}', system-ui, '__myFont1_Fallback_.{6}'$/
           ),
           fontStyle: 'italic',
           fontWeight: 100,
@@ -119,7 +119,7 @@ describe('@next/font/google', () => {
         variable: expect.stringMatching(/^__variable_.{6}$/),
         style: {
           fontFamily: expect.stringMatching(
-            /^'__Indie_Flower_.{6}', '__Indie_Flower_Fallback_.{6}'$/
+            /^'__myFont2_.{6}', '__myFont2_Fallback_.{6}'$/
           ),
         },
       })
@@ -238,7 +238,7 @@ describe('@next/font/google', () => {
       ).not.toMatch(roboto100ItalicRegex)
 
       // Local font
-      const localFontRegex = /^__Fraunces_.{6}, __Fraunces_Fallback_.{6}$/
+      const localFontRegex = /^__myFont_.{6}, __myFont_Fallback_.{6}$/
       expect(
         await browser.eval(
           'getComputedStyle(document.querySelector("#variables-local-font")).fontFamily'
@@ -361,22 +361,22 @@ describe('@next/font/google', () => {
         const browser = await webdriver(next.url, '/with-local-fonts')
 
         const ascentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).ascentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).ascentOverride'
         )
         expect(ascentOverride).toBe('103.26%')
 
         const descentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).descentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).descentOverride'
         )
         expect(descentOverride).toBe('51.94%')
 
         const lineGapOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).lineGapOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).lineGapOverride'
         )
         expect(lineGapOverride).toBe('0%')
 
         const sizeAdjust = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Indie_Flower_Fallback")).sizeAdjust'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont2_Fallback")).sizeAdjust'
         )
         expect(sizeAdjust).toBe('94%')
       })
@@ -385,22 +385,22 @@ describe('@next/font/google', () => {
         const browser = await webdriver(next.url, '/with-local-fonts')
 
         const ascentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).ascentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).ascentOverride'
         )
         expect(ascentOverride).toBe('84.71%')
 
         const descentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).descentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).descentOverride'
         )
         expect(descentOverride).toBe('22.09%')
 
         const lineGapOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).lineGapOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).lineGapOverride'
         )
         expect(lineGapOverride).toBe('0%')
 
         const sizeAdjust = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Fraunces_Fallback")).sizeAdjust'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("myFont1_Fallback")).sizeAdjust'
         )
         expect(sizeAdjust).toBe('115.45%')
       })
@@ -409,22 +409,22 @@ describe('@next/font/google', () => {
         const browser = await webdriver(next.url, '/with-local-fonts')
 
         const ascentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).ascentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).ascentOverride'
         )
         expect(ascentOverride).toBe('92.49%')
 
         const descentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).descentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).descentOverride'
         )
         expect(descentOverride).toBe('24.34%')
 
         const lineGapOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).lineGapOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).lineGapOverride'
         )
         expect(lineGapOverride).toBe('0%')
 
         const sizeAdjust = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Thin_Fallback")).sizeAdjust'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("roboto_Fallback")).sizeAdjust'
         )
         expect(sizeAdjust).toBe('100.3%')
       })
@@ -433,22 +433,22 @@ describe('@next/font/google', () => {
         const browser = await webdriver(next.url, '/with-local-fonts')
 
         const ascentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).ascentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).ascentOverride'
         )
         expect(ascentOverride).toBe('92.49%')
 
         const descentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).descentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).descentOverride'
         )
         expect(descentOverride).toBe('24.34%')
 
         const lineGapOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).lineGapOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).lineGapOverride'
         )
         expect(lineGapOverride).toBe('0%')
 
         const sizeAdjust = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Fallback")).sizeAdjust'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar1_Fallback")).sizeAdjust'
         )
         expect(sizeAdjust).toBe('100.3%')
       })
@@ -457,22 +457,22 @@ describe('@next/font/google', () => {
         const browser = await webdriver(next.url, '/with-local-fonts')
 
         const ascentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).ascentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).ascentOverride'
         )
         expect(ascentOverride).toBe('92.49%')
 
         const descentOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).descentOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).descentOverride'
         )
         expect(descentOverride).toBe('24.34%')
 
         const lineGapOverride = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).lineGapOverride'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).lineGapOverride'
         )
         expect(lineGapOverride).toBe('0%')
 
         const sizeAdjust = await browser.eval(
-          'Array.from(document.fonts.values()).find(font => font.family.includes("Roboto_Black_Fallback")).sizeAdjust'
+          'Array.from(document.fonts.values()).find(font => font.family.includes("robotoVar2_Fallback")).sizeAdjust'
         )
         expect(sizeAdjust).toBe('100.3%')
       })
diff --git a/test/unit/google-font-loader.test.ts b/test/unit/google-font-loader.test.ts
index 0348f44941209bb..cbd690989c8f003 100644
--- a/test/unit/google-font-loader.test.ts
+++ b/test/unit/google-font-loader.test.ts
@@ -86,6 +86,7 @@ describe('@next/font/google loader', () => {
         resolve: jest.fn(),
         fs: {} as any,
         isServer: true,
+        variableName: 'myFont',
       })
       expect(css).toBe('OK\n')
       expect(fetch).toHaveBeenCalledTimes(1)
@@ -112,6 +113,7 @@ describe('@next/font/google loader', () => {
         resolve: jest.fn(),
         fs: {} as any,
         isServer: true,
+        variableName: 'myFont',
       })
       expect(css).toBe('1\n2\n3\n4\n5\n6\n')
       expect(fetch).toHaveBeenCalledTimes(6)
@@ -163,6 +165,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Failed to fetch font  \`Alkalami\`.
@@ -180,6 +183,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
         `"@next/font/google has no default export"`
@@ -196,6 +200,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
         `"Unknown font \`Unknown Font\`"`
@@ -212,6 +217,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Unknown weight \`123\` for font \`Inter\`.
@@ -229,6 +235,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Missing weight for font \`Abel\`.
@@ -246,6 +253,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Unknown style \`normal\` for font \`Molle\`.
@@ -263,6 +271,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
                       "Invalid display value \`invalid\` for font \`Inter\`.
@@ -280,6 +289,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
         `"Axes can only be defined for variable fonts"`
@@ -296,6 +306,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
         `"Font \`Lora\` has no definable \`axes\`"`
@@ -312,6 +323,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Invalid axes value for font \`Inter\`, expected an array of axes.
@@ -329,6 +341,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
               "Invalid axes value \`INVALID\` for font \`Roboto Flex\`.
@@ -346,6 +359,7 @@ describe('@next/font/google loader', () => {
           resolve: jest.fn(),
           fs: {} as any,
           isServer: true,
+          variableName: 'myFont',
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
         `"Unexpected \`variable\` in weight array for font \`Inter\`. You only need \`variable\`, it includes all available weights."`
diff --git a/test/unit/local-font-loader.test.ts b/test/unit/local-font-loader.test.ts
index 808da6c3a7254b4..3a1b38a1cda0c99 100644
--- a/test/unit/local-font-loader.test.ts
+++ b/test/unit/local-font-loader.test.ts
@@ -10,6 +10,7 @@ describe('@next/font/local', () => {
         emitFontFile: () => '/_next/static/media/my-font.woff2',
         resolve: jest.fn(),
         isServer: true,
+        variableName: 'myFont',
         fs: {
           readFile: (_, cb) => cb(null, 'fontdata'),
         },
@@ -17,7 +18,7 @@ describe('@next/font/local', () => {
 
       expect(css).toMatchInlineSnapshot(`
         "@font-face {
-        font-family: 'my-font';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         }
@@ -33,6 +34,7 @@ describe('@next/font/local', () => {
         emitFontFile: () => '/_next/static/media/my-font.woff2',
         resolve: jest.fn(),
         isServer: true,
+        variableName: 'myFont',
         fs: {
           readFile: (_, cb) => cb(null, 'fontdata'),
         },
@@ -40,7 +42,7 @@ describe('@next/font/local', () => {
 
       expect(css).toMatchInlineSnapshot(`
         "@font-face {
-        font-family: 'my-font';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 100 900;
@@ -66,6 +68,7 @@ describe('@next/font/local', () => {
         emitFontFile: () => '/_next/static/media/my-font.woff2',
         resolve: jest.fn(),
         isServer: true,
+        variableName: 'myFont',
         fs: {
           readFile: (_, cb) => cb(null, 'fontdata'),
         },
@@ -75,7 +78,7 @@ describe('@next/font/local', () => {
         "@font-face {
         font-feature-settings: \\"smcp\\" on;
         ascent-override: 90%;
-        font-family: 'my-font';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         }
@@ -115,6 +118,7 @@ describe('@next/font/local', () => {
         emitFontFile: (buffer) => `/_next/static/media/my-font.woff2`,
         resolve: jest.fn(),
         isServer: true,
+        variableName: 'myFont',
         fs: {
           readFile: (path, cb) => cb(null, path),
         },
@@ -122,7 +126,7 @@ describe('@next/font/local', () => {
 
       expect(css).toMatchInlineSnapshot(`
         "@font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 100;
@@ -130,7 +134,7 @@ describe('@next/font/local', () => {
         }
 
         @font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 400;
@@ -138,7 +142,7 @@ describe('@next/font/local', () => {
         }
 
         @font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 700;
@@ -146,7 +150,7 @@ describe('@next/font/local', () => {
         }
 
         @font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 400;
@@ -183,6 +187,7 @@ describe('@next/font/local', () => {
         emitFontFile: (buffer) => `/_next/static/media/my-font.woff2`,
         resolve: jest.fn(),
         isServer: true,
+        variableName: 'myFont',
         fs: {
           readFile: (path, cb) => cb(null, path),
         },
@@ -190,7 +195,7 @@ describe('@next/font/local', () => {
 
       expect(css).toMatchInlineSnapshot(`
         "@font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 400;
@@ -198,7 +203,7 @@ describe('@next/font/local', () => {
         }
 
         @font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 400;
@@ -206,7 +211,7 @@ describe('@next/font/local', () => {
         }
 
         @font-face {
-        font-family: 'font1';
+        font-family: myFont;
         src: url(/_next/static/media/my-font.woff2) format('woff2');
         font-display: optional;
         font-weight: 700;
@@ -226,6 +231,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -242,6 +248,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -258,6 +265,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn().mockResolvedValue(''),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -274,6 +282,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
@@ -297,6 +306,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -313,6 +323,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: {},
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(
@@ -339,6 +350,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: { readFile: (path, cb) => cb(null, path) },
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`
@@ -366,6 +378,7 @@ describe('@next/font/local', () => {
           emitFontFile: jest.fn(),
           resolve: jest.fn(),
           isServer: true,
+          variableName: 'myFont',
           fs: { readFile: (path, cb) => cb(null, path) },
         })
       ).rejects.toThrowErrorMatchingInlineSnapshot(`