diff --git a/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-small.png b/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-small.png
index 4672052b9..3714caea7 100644
Binary files a/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-small.png and b/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-small.png differ
diff --git a/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-span.png b/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-span.png
index 4672052b9..3714caea7 100644
Binary files a/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-span.png and b/packages/components/src/components/text/__screenshots__/chrome/mdc-text-tag-span.png differ
diff --git a/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-small.png b/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-small.png
index 4672052b9..3714caea7 100644
Binary files a/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-small.png and b/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-small.png differ
diff --git a/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-span.png b/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-span.png
index 4672052b9..3714caea7 100644
Binary files a/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-span.png and b/packages/components/src/components/text/__screenshots__/msedge/mdc-text-tag-span.png differ
diff --git a/packages/components/src/components/text/fonts.styles.ts b/packages/components/src/components/text/fonts.styles.ts
index 328e7ba3e..646c809fd 100644
--- a/packages/components/src/components/text/fonts.styles.ts
+++ b/packages/components/src/components/text/fonts.styles.ts
@@ -1,7 +1,15 @@
 import { css } from 'lit';
 
 export const fontsStyles = css`
-  :host([type="headline-small-regular"])::part(text) {
+  :host([tagname])::part(text) {
+    font-size: unset;
+    font-weight: unset;
+    line-height: unset;
+    text-decoration: unset;
+    text-transform: unset;
+  }
+
+  :host([type="headline-small-regular"]) {
     font-size: var(--mds-font-apps-headline-small-regular-font-size);
     font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
     line-height: var(--mds-font-apps-headline-small-regular-line-height);
@@ -9,7 +17,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-headline-small-regular-text-case);
   }
 
-  :host([type="headline-small-light"])::part(text) {
+  :host([type="headline-small-light"]) {
     font-size: var(--mds-font-apps-headline-small-light-font-size);
     font-weight: var(--mds-font-apps-headline-small-light-font-weight);
     line-height: var(--mds-font-apps-headline-small-light-line-height);
@@ -17,7 +25,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-headline-small-light-text-case);
   }
 
-  :host([type="heading-xlarge-bold"])::part(text) {
+  :host([type="heading-xlarge-bold"]) {
     font-size: var(--mds-font-apps-heading-xlarge-bold-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-bold-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-bold-line-height);
@@ -25,7 +33,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-xlarge-bold-text-case);
   }
   
-  :host([type="heading-xlarge-medium"])::part(text) {
+  :host([type="heading-xlarge-medium"]) {
     font-size: var(--mds-font-apps-heading-xlarge-medium-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-medium-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-medium-line-height);
@@ -33,7 +41,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-xlarge-medium-text-case);
   }
   
-  :host([type="heading-xlarge-regular"])::part(text) {
+  :host([type="heading-xlarge-regular"]) {
     font-size: var(--mds-font-apps-heading-xlarge-regular-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-regular-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-regular-line-height);
@@ -41,7 +49,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-xlarge-regular-text-case);
   }
 
-  :host([type="heading-large-bold"])::part(text) {
+  :host([type="heading-large-bold"]) {
     font-size: var(--mds-font-apps-heading-large-bold-font-size);
     font-weight: var(--mds-font-apps-heading-large-bold-font-weight);
     line-height: var(--mds-font-apps-heading-large-bold-line-height);
@@ -49,7 +57,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-large-bold-text-case);
   }
   
-  :host([type="heading-large-medium"])::part(text) {
+  :host([type="heading-large-medium"]) {
     font-size: var(--mds-font-apps-heading-large-medium-font-size);
     font-weight: var(--mds-font-apps-heading-large-medium-font-weight);
     line-height: var(--mds-font-apps-heading-large-medium-line-height);
@@ -57,7 +65,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-large-medium-text-case);
   }
   
-  :host([type="heading-large-regular"])::part(text) {
+  :host([type="heading-large-regular"]) {
     font-size: var(--mds-font-apps-heading-large-regular-font-size);
     font-weight: var(--mds-font-apps-heading-large-regular-font-weight);
     line-height: var(--mds-font-apps-heading-large-regular-line-height);
@@ -65,7 +73,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-large-regular-text-case);
   }
 
-  :host([type="heading-midsize-bold"])::part(text) {
+  :host([type="heading-midsize-bold"]) {
     font-size: var(--mds-font-apps-heading-midsize-bold-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-bold-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-bold-line-height);
@@ -73,7 +81,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-midsize-bold-text-case);
   }
   
-  :host([type="heading-midsize-medium"])::part(text) {
+  :host([type="heading-midsize-medium"]) {
     font-size: var(--mds-font-apps-heading-midsize-medium-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-medium-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-medium-line-height);
@@ -81,7 +89,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-midsize-medium-text-case);
   }
   
-  :host([type="heading-midsize-regular"])::part(text) {
+  :host([type="heading-midsize-regular"]) {
     font-size: var(--mds-font-apps-heading-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-regular-line-height);
@@ -89,7 +97,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-midsize-regular-text-case);
   }
 
-  :host([type="heading-small-bold"])::part(text) {
+  :host([type="heading-small-bold"]) {
     font-size: var(--mds-font-apps-heading-small-bold-font-size);
     font-weight: var(--mds-font-apps-heading-small-bold-font-weight);
     line-height: var(--mds-font-apps-heading-small-bold-line-height);
@@ -97,7 +105,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-small-bold-text-case);
   }
   
-  :host([type="heading-small-medium"])::part(text) {
+  :host([type="heading-small-medium"]) {
     font-size: var(--mds-font-apps-heading-small-medium-font-size);
     font-weight: var(--mds-font-apps-heading-small-medium-font-weight);
     line-height: var(--mds-font-apps-heading-small-medium-line-height);
@@ -105,7 +113,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-small-medium-text-case);
   }
   
-  :host([type="heading-small-regular"])::part(text) {
+  :host([type="heading-small-regular"]) {
     font-size: var(--mds-font-apps-heading-small-regular-font-size);
     font-weight: var(--mds-font-apps-heading-small-regular-font-weight);
     line-height: var(--mds-font-apps-heading-small-regular-line-height);
@@ -113,7 +121,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-heading-small-regular-text-case);
   }
 
-  :host([type="body-large-bold"])::part(text) {
+  :host([type="body-large-bold"]) {
     font-size: var(--mds-font-apps-body-large-bold-font-size);
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     line-height: var(--mds-font-apps-body-large-bold-line-height);
@@ -121,7 +129,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-large-bold-text-case);
   }
   
-  :host([type="body-large-medium-underline"])::part(text) {
+  :host([type="body-large-medium-underline"]) {
     font-size: var(--mds-font-apps-body-large-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-medium-underline-line-height);
@@ -129,7 +137,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-large-medium-underline-text-case);
   }
   
-  :host([type="body-large-medium"])::part(text) {
+  :host([type="body-large-medium"]) {
     font-size: var(--mds-font-apps-body-large-medium-font-size);
     font-weight: var(--mds-font-apps-body-large-medium-font-weight);
     line-height: var(--mds-font-apps-body-large-medium-line-height);
@@ -137,7 +145,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-large-medium-text-case);
   }
   
-  :host([type="body-large-regular-underline"])::part(text) {
+  :host([type="body-large-regular-underline"]) {
     font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -145,7 +153,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
   
-  :host([type="body-large-regular"])::part(text) {
+  :host([type="body-large-regular"]) {
     font-size: var(--mds-font-apps-body-large-regular-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -153,7 +161,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([type="body-midsize-bold"])::part(text) {
+  :host([type="body-midsize-bold"]) {
     font-size: var(--mds-font-apps-body-midsize-bold-font-size);
     font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
     line-height: var(--mds-font-apps-body-midsize-bold-line-height);
@@ -161,7 +169,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
   }
   
-  :host([type="body-midsize-medium-underline"])::part(text) {
+  :host([type="body-midsize-medium-underline"]) {
     font-size: var(--mds-font-apps-body-midsize-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-medium-underline-line-height);
@@ -169,7 +177,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-midsize-medium-underline-text-case);
   }
   
-  :host([type="body-midsize-medium"])::part(text) {
+  :host([type="body-midsize-medium"]) {
     font-size: var(--mds-font-apps-body-midsize-medium-font-size);
     font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
     line-height: var(--mds-font-apps-body-midsize-medium-line-height);
@@ -177,7 +185,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-midsize-medium-text-case);
   }
   
-  :host([type="body-midsize-regular-underline"])::part(text) {
+  :host([type="body-midsize-regular-underline"]) {
     font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -185,7 +193,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
   
-  :host([type="body-midsize-regular"])::part(text) {
+  :host([type="body-midsize-regular"]) {
     font-size: var(--mds-font-apps-body-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -193,7 +201,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([type="body-small-bold"])::part(text) {
+  :host([type="body-small-bold"]) {
     font-size: var(--mds-font-apps-body-small-bold-font-size);
     font-weight: var(--mds-font-apps-body-small-bold-font-weight);
     line-height: var(--mds-font-apps-body-small-bold-line-height);
@@ -201,7 +209,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-small-bold-text-case);
   }
   
-  :host([type="body-small-medium-underline"])::part(text) {
+  :host([type="body-small-medium-underline"]) {
     font-size: var(--mds-font-apps-body-small-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-medium-underline-line-height);
@@ -209,7 +217,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-small-medium-underline-text-case);
   }
   
-  :host([type="body-small-medium"])::part(text) {
+  :host([type="body-small-medium"]) {
     font-size: var(--mds-font-apps-body-small-medium-font-size);
     font-weight: var(--mds-font-apps-body-small-medium-font-weight);
     line-height: var(--mds-font-apps-body-small-medium-line-height);
@@ -217,7 +225,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-small-medium-text-case);
   }
   
-  :host([type="body-small-regular-underline"])::part(text) {
+  :host([type="body-small-regular-underline"]) {
     font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
@@ -225,7 +233,7 @@ export const fontsStyles = css`
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
   
-  :host([type="body-small-regular"])::part(text) {
+  :host([type="body-small-regular"]) {
     font-size: var(--mds-font-apps-body-small-regular-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-line-height);