diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
index 12271bd8837..5dbec0ea408 100644
--- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
+++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -445,10 +445,10 @@ exports[`generated tokens CSS global should match 1`] = `
   --calcite-font-weight-regular: 400;
   --calcite-font-weight-normal: 400; /* For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
   --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
-  --calcite-font-family-code: Monaco Consolas "Andale Mono" "Lucida Console"
+  --calcite-font-family-code: Monaco, Consolas, "Andale Mono", "Lucida Console",
     monospace; /* Font family for code with fallbacks */
-  --calcite-font-family: "Avenir Next World" "Avenir Next LT Pro" Avenir
-    "Helvetica Neue" sans-serif; /* Primary font with fallbacks */
+  --calcite-font-family: "Avenir Next World", "Avenir Next LT Pro", Avenir,
+    "Helvetica Neue", sans-serif; /* Primary font with fallbacks */
   --calcite-corner-radius-pill: 100%;
   --calcite-corner-radius-round: 4px;
   --calcite-corner-radius-sharp: 0;
@@ -2033,10 +2033,10 @@ $calcite-font-weight-medium: 500;
 $calcite-font-weight-regular: 400;
 $calcite-font-weight-normal: 400; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
 $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
-$calcite-font-family-code: Monaco Consolas "Andale Mono" "Lucida Console"
+$calcite-font-family-code: Monaco, Consolas, "Andale Mono", "Lucida Console",
   monospace; // Font family for code with fallbacks
-$calcite-font-family: "Avenir Next World" "Avenir Next LT Pro" Avenir
-  "Helvetica Neue" sans-serif; // Primary font with fallbacks
+$calcite-font-family: "Avenir Next World", "Avenir Next LT Pro", Avenir,
+  "Helvetica Neue", sans-serif; // Primary font with fallbacks
 $calcite-corner-radius-pill: 100%;
 $calcite-corner-radius-round: 4px;
 $calcite-corner-radius-sharp: 0;
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
index eb6a44ba1cd..4f6e9448829 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
@@ -14,7 +14,7 @@ type FontFamilyFallbackToken = TransformedToken & { value: string[] };
 export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction<string> = (
   token: FontFamilyFallbackToken,
 ) => {
-  return token.value.join(" ");
+  return token.value.join(",");
 };
 
 export const registerValueFontFamilyWithFallbacks = (sd: StyleDictionary): void => {