diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index b2cfbbca..d84545c6 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -111,8 +111,7 @@ Item {
                     Layout.alignment: Qt.AlignHCenter
                     Layout.bottomMargin: Tokens.spacing.medium
                     text: qsTr("Wallpaper")
-                    font.pointSize: Tokens.font.size.extraLarge
-                    font.weight: 600
+                    font: Tokens.font.body.builders.large.size(28).weight(600).build()
                 }
 
                 Loader {
@@ -177,8 +176,7 @@ Item {
 
                         StyledText {
                             text: qsTr("Appearance")
-                            font.pointSize: Tokens.font.size.large
-                            font.weight: 500
+                            font: Tokens.font.body.builders.large.weight(500).build()
                         }
 
                         Item {
diff --git a/modules/controlcenter/appearance/sections/BackgroundSection.qml b/modules/controlcenter/appearance/sections/BackgroundSection.qml
index 90879129..b7a4d9cc 100644
--- a/modules/controlcenter/appearance/sections/BackgroundSection.qml
+++ b/modules/controlcenter/appearance/sections/BackgroundSection.qml
@@ -39,8 +39,7 @@ CollapsibleSection {
     StyledText {
         Layout.topMargin: Tokens.spacing.medium
         text: qsTr("Desktop Clock")
-        font.pointSize: Tokens.font.size.larger
-        font.weight: 500
+        font: Tokens.font.body.builders.large.weight(500).build()
     }
 
     SwitchRow {
@@ -69,8 +68,7 @@ CollapsibleSection {
 
         StyledText {
             text: qsTr("Positioning")
-            font.pointSize: Tokens.font.size.larger
-            font.weight: 500
+            font: Tokens.font.body.builders.large.weight(500).build()
         }
 
         SplitButtonRow {
@@ -160,8 +158,7 @@ CollapsibleSection {
 
         StyledText {
             text: qsTr("Shadow")
-            font.pointSize: Tokens.font.size.larger
-            font.weight: 500
+            font: Tokens.font.body.builders.large.weight(500).build()
         }
 
         SwitchRow {
@@ -229,8 +226,7 @@ CollapsibleSection {
 
         StyledText {
             text: qsTr("Background")
-            font.pointSize: Tokens.font.size.larger
-            font.weight: 500
+            font: Tokens.font.body.builders.large.weight(500).build()
         }
 
         SwitchRow {
@@ -280,8 +276,7 @@ CollapsibleSection {
     StyledText {
         Layout.topMargin: Tokens.spacing.medium
         text: qsTr("Visualiser")
-        font.pointSize: Tokens.font.size.larger
-        font.weight: 500
+        font: Tokens.font.body.builders.large.weight(500).build()
     }
 
     SwitchRow {
diff --git a/modules/controlcenter/appearance/sections/ColorSchemeSection.qml b/modules/controlcenter/appearance/sections/ColorSchemeSection.qml
index f28651b5..09662d38 100644
--- a/modules/controlcenter/appearance/sections/ColorSchemeSection.qml
+++ b/modules/controlcenter/appearance/sections/ColorSchemeSection.qml
@@ -87,7 +87,7 @@ CollapsibleSection {
 
                             visible: false
                             text: "circle"
-                            font.pointSize: Tokens.font.size.large
+                            font: Tokens.font.icon.large
                         }
 
                         Item {
@@ -116,12 +116,12 @@ CollapsibleSection {
 
                         StyledText {
                             text: modelData.flavour ?? ""
-                            font.pointSize: Tokens.font.size.normal
+                            font: Tokens.font.body.medium
                         }
 
                         StyledText {
                             text: modelData.name ?? ""
-                            font.pointSize: Tokens.font.size.small
+                            font: Tokens.font.body.small
                             color: Colours.palette.m3outline
 
                             elide: Text.ElideRight
@@ -137,7 +137,7 @@ CollapsibleSection {
                         sourceComponent: MaterialIcon {
                             text: "check"
                             color: Colours.palette.m3onSurfaceVariant
-                            font.pointSize: Tokens.font.size.large
+                            font: Tokens.font.icon.large
                         }
                     }
                 }
diff --git a/modules/controlcenter/appearance/sections/ColorVariantSection.qml b/modules/controlcenter/appearance/sections/ColorVariantSection.qml
index 656ae9e5..0d2a893c 100644
--- a/modules/controlcenter/appearance/sections/ColorVariantSection.qml
+++ b/modules/controlcenter/appearance/sections/ColorVariantSection.qml
@@ -68,21 +68,21 @@ CollapsibleSection {
 
                     MaterialIcon {
                         text: modelData.icon
-                        font.pointSize: Tokens.font.size.large
+                        font: Tokens.font.icon.large
                         fill: modelData.variant === Schemes.currentVariant ? 1 : 0
                     }
 
                     StyledText {
                         Layout.fillWidth: true
                         text: modelData.name
-                        font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400
+                        font: modelData.variant === Schemes.currentVariant ? Tokens.font.body.builders.small.weight(500).build() : Tokens.font.body.builders.small.weight(400).build()
                     }
 
                     MaterialIcon {
                         visible: modelData.variant === Schemes.currentVariant
                         text: "check"
                         color: Colours.palette.m3primary
-                        font.pointSize: Tokens.font.size.large
+                        font: Tokens.font.icon.large
                     }
                 }
             }
diff --git a/modules/controlcenter/appearance/sections/FontsSection.qml b/modules/controlcenter/appearance/sections/FontsSection.qml
index de0c8eaa..8c2d89f2 100644
--- a/modules/controlcenter/appearance/sections/FontsSection.qml
+++ b/modules/controlcenter/appearance/sections/FontsSection.qml
@@ -76,7 +76,7 @@ CollapsibleSection {
 
                         StyledText {
                             text: modelData
-                            font.pointSize: Tokens.font.size.normal
+                            font: Tokens.font.body.medium
                         }
 
                         Item {
@@ -90,7 +90,7 @@ CollapsibleSection {
                             sourceComponent: MaterialIcon {
                                 text: "check"
                                 color: Colours.palette.m3onSurfaceVariant
-                                font.pointSize: Tokens.font.size.large
+                                font: Tokens.font.icon.large
                             }
                         }
                     }
@@ -157,7 +157,7 @@ CollapsibleSection {
 
                         StyledText {
                             text: modelData
-                            font.pointSize: Tokens.font.size.normal
+                            font: Tokens.font.body.medium
                         }
 
                         Item {
@@ -171,7 +171,7 @@ CollapsibleSection {
                             sourceComponent: MaterialIcon {
                                 text: "check"
                                 color: Colours.palette.m3onSurfaceVariant
-                                font.pointSize: Tokens.font.size.large
+                                font: Tokens.font.icon.large
                             }
                         }
                     }
@@ -240,7 +240,7 @@ CollapsibleSection {
 
                         StyledText {
                             text: modelData
-                            font.pointSize: Tokens.font.size.normal
+                            font: Tokens.font.body.medium
                         }
 
                         Item {
@@ -254,7 +254,7 @@ CollapsibleSection {
                             sourceComponent: MaterialIcon {
                                 text: "check"
                                 color: Colours.palette.m3onSurfaceVariant
-                                font.pointSize: Tokens.font.size.large
+                                font: Tokens.font.icon.large
                             }
                         }
                     }
diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml
index b677d69d..6cdee883 100644
--- a/modules/controlcenter/audio/AudioPane.qml
+++ b/modules/controlcenter/audio/AudioPane.qml
@@ -46,8 +46,7 @@ Item {
 
                         StyledText {
                             text: qsTr("Audio")
-                            font.pointSize: Tokens.font.size.large
-                            font.weight: 500
+                            font: Tokens.font.body.builders.large.weight(500).build()
                         }
 
                         Item {
@@ -72,8 +71,7 @@ Item {
 
                                 StyledText {
                                     text: qsTr("Devices (%1)").arg(Audio.sinks.length)
-                                    font.pointSize: Tokens.font.size.normal
-                                    font.weight: 500
+                                    font: Tokens.font.body.builders.medium.weight(500).build()
                                 }
                             }
 
@@ -114,7 +112,7 @@ Item {
 
                                         MaterialIcon {
                                             text: Audio.sink?.id === modelData.id ? "speaker" : "speaker_group"
-                                            font.pointSize: Tokens.font.size.large
+                                            font: Tokens.font.icon.large
                                             fill: Audio.sink?.id === modelData.id ? 1 : 0
                                         }
 
@@ -124,7 +122,7 @@ Item {
                                             maximumLineCount: 1
 
                                             text: modelData.description || qsTr("Unknown")
-                                            font.weight: Audio.sink?.id === modelData.id ? 500 : 400
+                                            font: Audio.sink?.id === modelData.id ? Tokens.font.body.builders.small.weight(500).build() : Tokens.font.body.builders.small.weight(400).build()
                                         }
                                     }
                                 }
@@ -149,8 +147,7 @@ Item {
 
                                 StyledText {
                                     text: qsTr("Devices (%1)").arg(Audio.sources.length)
-                                    font.pointSize: Tokens.font.size.normal
-                                    font.weight: 500
+                                    font: Tokens.font.body.builders.medium.weight(500).build()
                                 }
                             }
 
@@ -191,7 +188,7 @@ Item {
 
                                         MaterialIcon {
                                             text: "mic"
-                                            font.pointSize: Tokens.font.size.large
+                                            font: Tokens.font.icon.large
                                             fill: Audio.source?.id === modelData.id ? 1 : 0
                                         }
 
@@ -201,7 +198,7 @@ Item {
                                             maximumLineCount: 1
 
                                             text: modelData.description || qsTr("Unknown")
-                                            font.weight: Audio.source?.id === modelData.id ? 500 : 400
+                                            font: Audio.source?.id === modelData.id ? Tokens.font.body.builders.small.weight(500).build() : Tokens.font.body.builders.small.weight(400).build()
                                         }
                                     }
                                 }
@@ -254,8 +251,7 @@ Item {
 
                                 StyledText {
                                     text: qsTr("Volume")
-                                    font.pointSize: Tokens.font.size.normal
-                                    font.weight: 500
+                                    font: Tokens.font.body.builders.medium.weight(500).build()
                                 }
 
                                 Item {
@@ -306,7 +302,7 @@ Item {
                                 StyledText {
                                     text: "%"
                                     color: Colours.palette.m3outline
-                                    font.pointSize: Tokens.font.size.normal
+                                    font: Tokens.font.body.medium
                                     opacity: Audio.muted ? 0.5 : 1
                                 }
 
@@ -372,8 +368,7 @@ Item {
 
                                 StyledText {
                                     text: qsTr("Volume")
-                                    font.pointSize: Tokens.font.size.normal
-                                    font.weight: 500
+                                    font: Tokens.font.body.builders.medium.weight(500).build()
                                 }
 
                                 Item {
@@ -424,7 +419,7 @@ Item {
                                 StyledText {
                                     text: "%"
                                     color: Colours.palette.m3outline
-                                    font.pointSize: Tokens.font.size.normal
+                                    font: Tokens.font.body.medium
                                     opacity: Audio.sourceMuted ? 0.5 : 1
                                 }
 
@@ -501,7 +496,7 @@ Item {
 
                                         MaterialIcon {
                                             text: "apps"
-                                            font.pointSize: Tokens.font.size.normal
+                                            font: Tokens.font.icon.medium
                                             fill: 0
                                         }
 
@@ -510,8 +505,7 @@ Item {
                                             elide: Text.ElideRight
                                             maximumLineCount: 1
                                             text: Audio.getStreamName(modelData)
-                                            font.pointSize: Tokens.font.size.normal
-                                            font.weight: 500
+                                            font: Tokens.font.body.builders.medium.weight(500).build()
                                         }
 
                                         StyledInputField {
@@ -558,7 +552,7 @@ Item {
                                         StyledText {
                                             text: "%"
                                             color: Colours.palette.m3outline
-                                            font.pointSize: Tokens.font.size.normal
+                                            font: Tokens.font.body.medium
                                             opacity: Audio.getStreamMuted(modelData) ? 0.5 : 1
                                         }
 
@@ -617,7 +611,7 @@ Item {
                                 visible: Audio.streams.length === 0
                                 text: qsTr("No applications currently playing audio")
                                 color: Colours.palette.m3outline
-                                font.pointSize: Tokens.font.size.small
+                                font: Tokens.font.body.small
                                 horizontalAlignment: Text.AlignHCenter
                             }
                         }
diff --git a/modules/controlcenter/components/ConnectedButtonGroup.qml b/modules/controlcenter/components/ConnectedButtonGroup.qml
index fa2e20e8..bd2d1dca 100644
--- a/modules/controlcenter/components/ConnectedButtonGroup.qml
+++ b/modules/controlcenter/components/ConnectedButtonGroup.qml
@@ -35,7 +35,7 @@ StyledRect {
         StyledText {
             visible: root.title !== ""
             text: root.title
-            font.pointSize: Tokens.font.size.normal
+            font: Tokens.font.title.small
         }
 
         GridLayout {
diff --git a/modules/controlcenter/components/DeviceList.qml b/modules/controlcenter/components/DeviceList.qml
index d9f95216..29215372 100644
--- a/modules/controlcenter/components/DeviceList.qml
+++ b/modules/controlcenter/components/DeviceList.qml
@@ -47,8 +47,7 @@ ColumnLayout {
         StyledText {
             visible: root.title !== ""
             text: root.title
-            font.pointSize: Tokens.font.size.large
-            font.weight: 500
+            font: Tokens.font.title.builders.medium.weight(500).build()
         }
 
         Loader {
diff --git a/modules/controlcenter/components/ReadonlySlider.qml b/modules/controlcenter/components/ReadonlySlider.qml
index 9874d27a..c7fb92b7 100644
--- a/modules/controlcenter/components/ReadonlySlider.qml
+++ b/modules/controlcenter/components/ReadonlySlider.qml
@@ -26,7 +26,7 @@ ColumnLayout {
         StyledText {
             visible: root.label !== ""
             text: root.label
-            font.pointSize: Tokens.font.size.normal
+            font: Tokens.font.label.medium
             color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface
         }
 
@@ -38,12 +38,12 @@ ColumnLayout {
             visible: root.readonly
             text: "lock"
             color: Colours.palette.m3outline
-            font.pointSize: Tokens.font.size.small
+            font: Tokens.font.icon.small
         }
 
         StyledText {
             text: Math.round(root.value) + (root.suffix !== "" ? " " + root.suffix : "")
-            font.pointSize: Tokens.font.size.normal
+            font: Tokens.font.body.medium
             color: root.readonly ? Colours.palette.m3outline : Colours.palette.m3onSurface
         }
     }
diff --git a/modules/controlcenter/components/SettingsHeader.qml b/modules/controlcenter/components/SettingsHeader.qml
index dccea377..11f5163a 100644
--- a/modules/controlcenter/components/SettingsHeader.qml
+++ b/modules/controlcenter/components/SettingsHeader.qml
@@ -23,15 +23,13 @@ Item {
         MaterialIcon {
             Layout.alignment: Qt.AlignHCenter
             text: root.icon
-            font.pointSize: Tokens.font.size.extraLarge * 3
-            font.bold: true
+            font: Tokens.font.icon.builders.xl.size(84).weight(Font.Bold).build()
         }
 
         StyledText {
             Layout.alignment: Qt.AlignHCenter
             text: root.title
-            font.pointSize: Tokens.font.size.large
-            font.bold: true
+            font: Tokens.font.title.builders.medium.weight(Font.Bold).build()
         }
     }
 }
diff --git a/modules/controlcenter/components/SliderInput.qml b/modules/controlcenter/components/SliderInput.qml
index ef30c3ba..24241859 100644
--- a/modules/controlcenter/components/SliderInput.qml
+++ b/modules/controlcenter/components/SliderInput.qml
@@ -76,7 +76,7 @@ ColumnLayout {
         StyledText {
             visible: root.label !== ""
             text: root.label
-            font.pointSize: Tokens.font.size.normal
+            font: Tokens.font.label.medium
         }
 
         Item {
@@ -138,7 +138,7 @@ ColumnLayout {
             visible: root.suffix !== ""
             text: root.suffix
             color: Colours.palette.m3outline
-            font.pointSize: Tokens.font.size.normal
+            font: Tokens.font.body.medium
         }
     }
 
diff --git a/modules/controlcenter/components/WallpaperGrid.qml b/modules/controlcenter/components/WallpaperGrid.qml
index 5b219698..ae36c17c 100644
--- a/modules/controlcenter/components/WallpaperGrid.qml
+++ b/modules/controlcenter/components/WallpaperGrid.qml
@@ -195,7 +195,7 @@ GridView {
                 visible: isCurrent
                 text: "check_circle"
                 color: Colours.palette.m3primary
-                font.pointSize: Tokens.font.size.large
+                font: Tokens.font.icon.large
             }
         }
 
@@ -210,8 +210,7 @@ GridView {
             anchors.bottomMargin: Tokens.padding.medium
 
             text: modelData.name
-            font.pointSize: Tokens.font.size.smaller
-            font.weight: 500
+            font: Tokens.font.body.builders.small.weight(500).build()
             color: isCurrent ? Colours.palette.m3primary : Colours.palette.m3onSurface
             elide: Text.ElideMiddle
             maximumLineCount: 1