diff --git a/package.json b/package.json
index bd442cc4b4..b6ef61d348 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
         "@open-wc/polyfills-loader": "^0.3.2",
         "@open-wc/testing": "^2.3.3",
         "@open-wc/testing-karma": "^3.1.24",
-        "@spectrum-css/commons": "^2.0.0",
         "@spectrum-css/link": "^2.0.2",
         "@spectrum-css/rule": "^2.0.2",
         "@spectrum-css/table": "^2.0.2",
diff --git a/packages/styles/fonts.css b/packages/styles/fonts.css
index 1572d2fee2..20e03fab8f 100755
--- a/packages/styles/fonts.css
+++ b/packages/styles/fonts.css
@@ -24,7 +24,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:root {
+:root,
+:host {
     --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont,
         'Segoe UI', Roboto, sans-serif;
 
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 55bf99e4ed..134c0acad6 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -34,6 +34,7 @@
         "lit-html": "^1.0.0"
     },
     "devDependencies": {
+        "@spectrum-css/commons": "^2.0.0",
         "@spectrum-css/typography": "^2.0.2",
         "@spectrum-css/vars": "^2.0.2"
     }
diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js
index 35e4823b5f..dfbcd6bcb5 100755
--- a/scripts/spectrum-vars.js
+++ b/scripts/spectrum-vars.js
@@ -28,7 +28,8 @@ const processCSSData = (data, identifier) => {
     let result = data.replace(/\\/g, '\\\\');
 
     // possible selectors to replace
-    const selector1 = `.spectrum--${identifier}`;
+    const selector1 =
+        identifier == ':root ' ? identifier : `.spectrum--${identifier}`;
     const selector2 = '.spectrum';
 
     // new selector values
@@ -55,6 +56,11 @@ const processCSSData = (data, identifier) => {
     return result;
 };
 
+const writeProcessedCSSToFile = (dstPath, contents) => {
+    result = `${license}\n/* stylelint-disable */\n${contents}\n/* stylelint-enable */`;
+    fs.writeFile(dstPath, result, 'utf8');
+};
+
 const processCSS = (srcPath, dstPath, identifier) => {
     fs.readFile(srcPath, 'utf8', function(err, data) {
         if (err) {
@@ -62,9 +68,7 @@ const processCSS = (srcPath, dstPath, identifier) => {
         }
 
         let result = processCSSData(data, identifier);
-        result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`;
-
-        fs.writeFile(dstPath, result, 'utf8');
+        writeProcessedCSSToFile(dstPath, result);
     });
 };
 
@@ -77,8 +81,7 @@ const processMultiSourceCSS = (srcPaths, dstPath, identifier) => {
         result = `${result}\n${processCSSData(data, identifier)}`;
     }
 
-    result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`;
-    fs.writeFile(dstPath, result, 'utf8');
+    writeProcessedCSSToFile(dstPath, result);
 };
 
 // where is spectrum-css?
@@ -182,7 +185,7 @@ cores.forEach(async (core) => {
         );
         console.log(`processing fonts from commons & typography`);
         processes.push(
-            processMultiSourceCSS([srcPath1, srcPath2], dstPath, 'typography')
+            processMultiSourceCSS([srcPath1, srcPath2], dstPath, ':root ')
         );
     }
 }