diff --git a/core/scripts/tokens.js b/core/scripts/tokens.js
index 0c1c3fc068..1b5a4d0352 100644
--- a/core/scripts/tokens.js
+++ b/core/scripts/tokens.js
@@ -71,7 +71,23 @@ StyleDictionary.registerFormat({
utilityClass = `.${variablesPrefix}-${className} {\n ${borderAttribute}: $ionic-${prop.name};\n}`;
break;
case 'font':
- const fontAttribute = prop.attributes.type === 'size' ? 'font-size' : 'font-weight';
+ let fontAttribute;
+ switch (prop.attributes.type) {
+ case 'size':
+ fontAttribute = 'font-size';
+ break;
+ case 'weight':
+ fontAttribute = 'font-weight';
+ break;
+ case 'line-height':
+ fontAttribute = 'line-height';
+ break;
+ case 'letter-spacing':
+ fontAttribute = 'letter-spacing';
+ break;
+ case 'family':
+ return;
+ }
utilityClass = `.${variablesPrefix}-${className} {\n ${fontAttribute}: $ionic-${prop.name};\n}`;
break;
case 'elevation':
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts b/core/src/css/test/typography/basic/typography.e2e.ts
index d87a270d2b..8939e78d0e 100644
--- a/core/src/css/test/typography/basic/typography.e2e.ts
+++ b/core/src/css/test/typography/basic/typography.e2e.ts
@@ -18,8 +18,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
H5: The quick brown fox jumps over the lazy dog
H6: The quick brown fox jumps over the lazy dog
Tag_P FontLarge: The quick brown fox jumps over the lazy dog
+
Tag_None FontMedium: The quick brown fox jumps over the lazydog
Tag_Span FontSmall: The quick brown fox jumps over the lazy dog
- Tag_None FontBase: The quick brown fox jumps over the lazydog
`,
config
@@ -34,12 +34,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
`
-
Tag H1 - Style Heading 2 - Font Light
- Tag H2 - Style Heading 3 - Font Light
+ Tag H1 - Style Heading 2 - Font Light
+ Tag H2 - Style Heading 3 - Font Light
Tag H3 - Style Heading 4 - Font Regular
- Tag H4 - Style Heading 5 - Font Medium
+ Tag H4 - Style Heading 5 - Font Medium
Tag H5 - Style Heading 6 - Font Semibold
- Tag H6 - Style Heading 1 - Font Bold
+ Tag H6 - Style Heading 1 - Font Bold
`,
config
@@ -74,11 +74,11 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
`
-
Utility class 'ionic-font-light'
-
Utility class 'ionic-font-regular'
-
Utility class 'ionic-font-medium'
-
Utility class 'ionic-font-semibold'
-
Utility class 'ionic-font-bold'
+
Utility class 'ionic-font-light'
+
Utility class 'ionic-font-regular'
+
Utility class 'ionic-font-medium'
+
Utility class 'ionic-font-semibold'
+
Utility class 'ionic-font-bold'