diff --git a/components/ConnectionHeader.qml b/components/ConnectionHeader.qml
index 886043ad..e6646c9f 100644
--- a/components/ConnectionHeader.qml
+++ b/components/ConnectionHeader.qml
@@ -16,15 +16,13 @@ ColumnLayout {
         Layout.alignment: Qt.AlignHCenter
         animate: true
         text: root.icon
-        font.pointSize: Tokens.font.size.extraLarge * 3
-        font.bold: true
+        font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 3).weight(Font.Bold).build()
     }
 
     StyledText {
         Layout.alignment: Qt.AlignHCenter
         animate: true
         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/components/ConnectionInfoSection.qml b/components/ConnectionInfoSection.qml
index 795e90d0..957dbb0f 100644
--- a/components/ConnectionInfoSection.qml
+++ b/components/ConnectionInfoSection.qml
@@ -18,7 +18,7 @@ ColumnLayout {
     StyledText {
         text: root.deviceDetails?.ipAddress || qsTr("Not available")
         color: Colours.palette.m3outline
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     StyledText {
@@ -29,7 +29,7 @@ ColumnLayout {
     StyledText {
         text: root.deviceDetails?.subnet || qsTr("Not available")
         color: Colours.palette.m3outline
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     StyledText {
@@ -40,7 +40,7 @@ ColumnLayout {
     StyledText {
         text: root.deviceDetails?.gateway || qsTr("Not available")
         color: Colours.palette.m3outline
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     StyledText {
@@ -51,7 +51,7 @@ ColumnLayout {
     StyledText {
         text: (root.deviceDetails && root.deviceDetails.dns && root.deviceDetails.dns.length > 0) ? root.deviceDetails.dns.join(", ") : qsTr("Not available")
         color: Colours.palette.m3outline
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
         wrapMode: Text.Wrap
         Layout.maximumWidth: parent.width
     }
diff --git a/components/MaterialIcon.qml b/components/MaterialIcon.qml
index 739c50ba..c7009953 100644
--- a/components/MaterialIcon.qml
+++ b/components/MaterialIcon.qml
@@ -5,12 +5,5 @@ StyledText {
     property real fill
     property int grade: Colours.light ? 0 : -25
 
-    font.family: Tokens.font.family.material
-    font.pointSize: Tokens.font.size.larger
-    font.variableAxes: ({
-            FILL: fill.toFixed(1),
-            GRAD: grade,
-            opsz: fontInfo.pixelSize,
-            wght: fontInfo.weight
-        })
+    font: Tokens.font.icon.builders.large.vaxis("FILL", fill.toFixed(1)).vaxis("GRAD", grade).vaxis("opsz", fontInfo.pixelSize).vaxis("wght", fontInfo.weight).build()
 }
diff --git a/components/PropertyRow.qml b/components/PropertyRow.qml
index d9524b75..980a7d9d 100644
--- a/components/PropertyRow.qml
+++ b/components/PropertyRow.qml
@@ -21,6 +21,6 @@ ColumnLayout {
     StyledText {
         text: root.value
         color: Colours.palette.m3outline
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 }
diff --git a/components/SectionHeader.qml b/components/SectionHeader.qml
index d9403897..f78cf486 100644
--- a/components/SectionHeader.qml
+++ b/components/SectionHeader.qml
@@ -15,8 +15,7 @@ ColumnLayout {
     StyledText {
         Layout.topMargin: Tokens.spacing.largeIncreased
         text: root.title
-        font.pointSize: Tokens.font.size.larger
-        font.weight: 500
+        font: Tokens.font.title.builders.medium.weight(500).build()
     }
 
     StyledText {
diff --git a/components/StyledText.qml b/components/StyledText.qml
index d3624c58..2754a46d 100644
--- a/components/StyledText.qml
+++ b/components/StyledText.qml
@@ -16,8 +16,7 @@ Text {
     renderType: Text.NativeRendering
     textFormat: Text.PlainText
     color: Colours.palette.m3onSurface
-    font.family: Tokens.font.family.sans
-    font.pointSize: Tokens.font.size.smaller
+    font: Tokens.font.body.small
 
     Behavior on color {
         CAnim {}
diff --git a/components/controls/CircularIndicator.qml b/components/controls/CircularIndicator.qml
index ac09f871..131b6bd7 100644
--- a/components/controls/CircularIndicator.qml
+++ b/components/controls/CircularIndicator.qml
@@ -19,8 +19,8 @@ BusyIndicator {
         Completing
     }
 
-    property real implicitSize: Tokens.font.size.normal * 3
-    property real strokeWidth: Tokens.padding.extraSmall * 0.8
+    property real implicitSize: Tokens.font.body.medium.pointSize * 3
+    property real strokeWidth: Tokens.padding.small * 0.8
     property color fgColour: Colours.palette.m3primary
     property color bgColour: Colours.palette.m3secondaryContainer
 
diff --git a/components/controls/CollapsibleSection.qml b/components/controls/CollapsibleSection.qml
index ddfa1be8..d2b4fa77 100644
--- a/components/controls/CollapsibleSection.qml
+++ b/components/controls/CollapsibleSection.qml
@@ -38,8 +38,7 @@ ColumnLayout {
 
             StyledText {
                 text: root.title
-                font.pointSize: Tokens.font.size.larger
-                font.weight: 500
+                font: Tokens.font.title.builders.medium.weight(500).build()
             }
 
             Item {
@@ -50,7 +49,7 @@ ColumnLayout {
                 text: "expand_more"
                 rotation: root.expanded ? 180 : 0
                 color: Colours.palette.m3onSurfaceVariant
-                font.pointSize: Tokens.font.size.normal
+                font: Tokens.font.icon.medium
 
                 Behavior on rotation {
                     Anim {
@@ -122,7 +121,7 @@ ColumnLayout {
                 visible: root.description !== ""
                 text: root.description
                 color: Colours.palette.m3onSurfaceVariant
-                font.pointSize: Tokens.font.size.small
+                font: Tokens.font.body.small
                 wrapMode: Text.Wrap
             }
         }
diff --git a/components/controls/FilledSlider.qml b/components/controls/FilledSlider.qml
index 1d8c85a9..f8807108 100644
--- a/components/controls/FilledSlider.qml
+++ b/components/controls/FilledSlider.qml
@@ -70,8 +70,7 @@ Slider {
                 function update(): void {
                     animate = !moving;
                     binding.when = moving;
-                    font.pointSize = moving ? Tokens.font.size.small : Tokens.font.size.larger;
-                    font.family = moving ? Tokens.font.family.sans : Tokens.font.family.material;
+                    font = moving ? Tokens.font.body.small : Tokens.font.icon.large;
                 }
 
                 text: root.icon
diff --git a/components/controls/StyledRadioButton.qml b/components/controls/StyledRadioButton.qml
index 33bd69b3..a12711b1 100644
--- a/components/controls/StyledRadioButton.qml
+++ b/components/controls/StyledRadioButton.qml
@@ -7,7 +7,7 @@ import qs.services
 RadioButton {
     id: root
 
-    font.pointSize: Tokens.font.size.smaller
+    font: Tokens.font.body.small
 
     implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
     implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
@@ -46,7 +46,7 @@ RadioButton {
 
     contentItem: StyledText {
         text: root.text
-        font.pointSize: root.font.pointSize
+        font: root.font
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: outerCircle.right
         anchors.leftMargin: Tokens.spacing.medium
diff --git a/components/controls/StyledSwitch.qml b/components/controls/StyledSwitch.qml
index 7215638d..941a8a19 100644
--- a/components/controls/StyledSwitch.qml
+++ b/components/controls/StyledSwitch.qml
@@ -18,7 +18,7 @@ Switch {
         color: root.checked ? Colours.palette.m3primary : Colours.layer(Colours.palette.m3surfaceContainerHighest, root.cLayer)
 
         implicitWidth: implicitHeight * 1.7
-        implicitHeight: Tokens.font.size.normal + Tokens.padding.large
+        implicitHeight: Tokens.font.body.medium.pointSize + Tokens.padding.smaller * 2
 
         StyledRect {
             readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
@@ -88,7 +88,7 @@ Switch {
                 asynchronous: true
 
                 ShapePath {
-                    strokeWidth: root.Tokens.font.size.larger * 0.15
+                    strokeWidth: root.Tokens.font.body.large.pointSize * 0.15
                     strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
                     fillColor: "transparent"
                     capStyle: root.Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
diff --git a/components/controls/StyledTextField.qml b/components/controls/StyledTextField.qml
index f3dead7e..85cf4fa6 100644
--- a/components/controls/StyledTextField.qml
+++ b/components/controls/StyledTextField.qml
@@ -11,8 +11,7 @@ TextField {
 
     color: Colours.palette.m3onSurface
     placeholderTextColor: Colours.palette.m3outline
-    font.family: Tokens.font.family.sans
-    font.pointSize: Tokens.font.size.smaller
+    font: Tokens.font.body.small
     renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
     cursorVisible: !readOnly
 
diff --git a/components/controls/ToggleButton.qml b/components/controls/ToggleButton.qml
index 33975573..3df3cda9 100644
--- a/components/controls/ToggleButton.qml
+++ b/components/controls/ToggleButton.qml
@@ -14,7 +14,7 @@ StyledRect {
     property string icon
     property string label
     property string accent: "Secondary"
-    property real iconSize: Tokens.font.size.large
+    property real iconSize: Tokens.font.icon.large.pointSize
     property real horizontalPadding: Tokens.padding.large
     property real verticalPadding: Tokens.padding.medium
     property string tooltip: ""
@@ -61,7 +61,7 @@ StyledRect {
             fill: root.toggled ? 1 : 0
             text: root.icon
             color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
-            font.pointSize: root.iconSize
+            font: Tokens.font.icon.builders.large.size(root.iconSize).build()
 
             Behavior on fill {
                 Anim {}
diff --git a/components/controls/Tooltip.qml b/components/controls/Tooltip.qml
index d6b30843..162bd691 100644
--- a/components/controls/Tooltip.qml
+++ b/components/controls/Tooltip.qml
@@ -138,7 +138,7 @@ Popup {
 
             text: root.text
             color: Colours.palette.m3onSurface
-            font.pointSize: Tokens.font.size.small
+            font: Tokens.font.body.small
         }
     }
 
diff --git a/components/filedialog/FolderContents.qml b/components/filedialog/FolderContents.qml
index 43d63c02..e5e2c669 100644
--- a/components/filedialog/FolderContents.qml
+++ b/components/filedialog/FolderContents.qml
@@ -59,15 +59,13 @@ Item {
                 Layout.alignment: Qt.AlignHCenter
                 text: "scan_delete"
                 color: Colours.palette.m3outline
-                font.pointSize: Tokens.font.size.extraLarge * 2
-                font.weight: 500
+                font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).weight(500).build()
             }
 
             StyledText {
                 text: qsTr("This folder is empty")
                 color: Colours.palette.m3outline
-                font.pointSize: Tokens.font.size.large
-                font.weight: 500
+                font: Tokens.font.body.builders.large.weight(500).build()
             }
         }
 
diff --git a/components/filedialog/HeaderBar.qml b/components/filedialog/HeaderBar.qml
index f4d2dc07..19cb75a5 100644
--- a/components/filedialog/HeaderBar.qml
+++ b/components/filedialog/HeaderBar.qml
@@ -78,7 +78,7 @@ StyledRect {
                             sourceComponent: StyledText {
                                 text: "/"
                                 color: Colours.palette.m3onSurfaceVariant
-                                font.bold: true
+                                font: Tokens.font.body.builders.small.weight(Font.Bold).build()
                             }
                         }
 
@@ -125,7 +125,7 @@ StyledRect {
 
                                 text: folder.modelData
                                 color: folder.index < root.dialog.cwd.length - 1 ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3onSurface
-                                font.bold: true
+                                font: Tokens.font.body.builders.small.weight(Font.Bold).build()
                             }
                         }
                     }
diff --git a/components/filedialog/Sidebar.qml b/components/filedialog/Sidebar.qml
index 7adf8949..3b82972a 100644
--- a/components/filedialog/Sidebar.qml
+++ b/components/filedialog/Sidebar.qml
@@ -32,8 +32,7 @@ StyledRect {
             Layout.bottomMargin: Tokens.spacing.medium
             text: qsTr("Files")
             color: Colours.palette.m3onSurface
-            font.pointSize: Tokens.font.size.larger
-            font.bold: true
+            font: Tokens.font.body.builders.large.weight(Font.Bold).build()
         }
 
         Repeater {
@@ -91,7 +90,7 @@ StyledRect {
                             return "folder";
                         }
                         color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
-                        font.pointSize: Tokens.font.size.large
+                        font: Tokens.font.icon.large
                         fill: place.selected ? 1 : 0
 
                         Behavior on fill {
@@ -103,7 +102,7 @@ StyledRect {
                         Layout.fillWidth: true
                         text: place.modelData
                         color: place.selected ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
-                        font.pointSize: Tokens.font.size.normal
+                        font: Tokens.font.body.medium
                         elide: Text.ElideRight
                     }
                 }