diff --git a/modules/bar/components/ActiveWindow.qml b/modules/bar/components/ActiveWindow.qml
index f39aa4c3..de7be80a 100644
--- a/modules/bar/components/ActiveWindow.qml
+++ b/modules/bar/components/ActiveWindow.qml
@@ -86,8 +86,7 @@ Item {
         id: metrics
 
         text: root.windowTitle
-        font.pointSize: root.Tokens.font.size.smaller
-        font.family: root.Tokens.font.family.mono
+        font: root.Tokens.font.mono.small
         elide: Qt.ElideRight
         elideWidth: root.maxHeight - icon.height
 
@@ -112,8 +111,7 @@ Item {
         anchors.top: icon.bottom
         anchors.topMargin: Tokens.spacing.small
 
-        font.pointSize: metrics.font.pointSize
-        font.family: metrics.font.family
+        font: metrics.font
         color: root.colour
         opacity: root.current === this ? 1 : 0
 
diff --git a/modules/bar/components/Clock.qml b/modules/bar/components/Clock.qml
index 1761d95e..b4771b1f 100644
--- a/modules/bar/components/Clock.qml
+++ b/modules/bar/components/Clock.qml
@@ -43,8 +43,7 @@ StyledRect {
 
             horizontalAlignment: StyledText.AlignHCenter
             text: Time.format("ddd\nd")
-            font.pointSize: Tokens.font.size.smaller
-            font.family: Tokens.font.family.sans
+            font: Tokens.font.body.small
             color: root.colour
         }
 
@@ -63,8 +62,7 @@ StyledRect {
 
             horizontalAlignment: StyledText.AlignHCenter
             text: Time.format(GlobalConfig.services.useTwelveHourClock ? "hh\nmm\nA" : "hh\nmm")
-            font.pointSize: Tokens.font.size.smaller
-            font.family: Tokens.font.family.mono
+            font: Tokens.font.mono.small
             color: root.colour
         }
     }
diff --git a/modules/bar/components/OsIcon.qml b/modules/bar/components/OsIcon.qml
index 94d1a1c4..99314470 100644
--- a/modules/bar/components/OsIcon.qml
+++ b/modules/bar/components/OsIcon.qml
@@ -8,8 +8,8 @@ import qs.utils
 Item {
     id: root
 
-    implicitWidth: Math.round(Tokens.font.size.large * 1.2)
-    implicitHeight: Math.round(Tokens.font.size.large * 1.2)
+    implicitWidth: Math.round(Tokens.font.body.large.pointSize * 1.2)
+    implicitHeight: Math.round(Tokens.font.body.large.pointSize * 1.2)
 
     MouseArea {
         anchors.fill: parent
@@ -30,8 +30,8 @@ Item {
         id: caelestiaLogo
 
         Logo {
-            implicitWidth: Math.round(Tokens.font.size.large * 1.6)
-            implicitHeight: Math.round(Tokens.font.size.large * 1.6)
+            implicitWidth: Math.round(Tokens.font.body.large.pointSize * 1.6)
+            implicitHeight: Math.round(Tokens.font.body.large.pointSize * 1.6)
         }
     }
 
@@ -40,7 +40,7 @@ Item {
 
         ColouredIcon {
             source: SysInfo.osLogo
-            implicitSize: Math.round(Tokens.font.size.large * 1.2)
+            implicitSize: Math.round(Tokens.font.body.large.pointSize * 1.2)
             colour: Colours.palette.m3tertiary
         }
     }
diff --git a/modules/bar/components/Power.qml b/modules/bar/components/Power.qml
index 464fe819..9d1777eb 100644
--- a/modules/bar/components/Power.qml
+++ b/modules/bar/components/Power.qml
@@ -29,7 +29,6 @@ Item {
 
         text: "power_settings_new"
         color: Colours.palette.m3error
-        font.bold: true
-        font.pointSize: Tokens.font.size.normal
+        font: Tokens.font.icon.builders.medium.weight(Font.Bold).build()
     }
 }
diff --git a/modules/bar/components/StatusIcons.qml b/modules/bar/components/StatusIcons.qml
index 46fd3af4..336b760b 100644
--- a/modules/bar/components/StatusIcons.qml
+++ b/modules/bar/components/StatusIcons.qml
@@ -136,7 +136,7 @@ StyledRect {
                 animate: true
                 text: Hypr.kbLayout
                 color: root.colour
-                font.family: Tokens.font.family.mono
+                font: Tokens.font.mono.medium
             }
         }
 
diff --git a/modules/bar/components/Tray.qml b/modules/bar/components/Tray.qml
index ca62d96b..43189444 100644
--- a/modules/bar/components/Tray.qml
+++ b/modules/bar/components/Tray.qml
@@ -100,7 +100,7 @@ StyledRect {
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: Config.bar.tray.background ? Tokens.padding.extraSmall : -Tokens.padding.extraSmall
                 text: "expand_less"
-                font.pointSize: Tokens.font.size.large
+                font: Tokens.font.icon.large
                 rotation: root.expanded ? 180 : 0
 
                 Behavior on rotation {
diff --git a/modules/bar/components/TrayItem.qml b/modules/bar/components/TrayItem.qml
index fefb532c..5bc9f993 100644
--- a/modules/bar/components/TrayItem.qml
+++ b/modules/bar/components/TrayItem.qml
@@ -13,8 +13,8 @@ MouseArea {
     required property SystemTrayItem modelData
 
     acceptedButtons: Qt.LeftButton | Qt.RightButton
-    implicitWidth: Tokens.font.size.small * 2
-    implicitHeight: Tokens.font.size.small * 2
+    implicitWidth: Tokens.font.body.small.pointSize * 2
+    implicitHeight: Tokens.font.body.small.pointSize * 2
 
     onClicked: event => {
         if (event.button === Qt.LeftButton)
diff --git a/modules/bar/popouts/ActiveWindow.qml b/modules/bar/popouts/ActiveWindow.qml
index 08991196..c3b332b6 100644
--- a/modules/bar/popouts/ActiveWindow.qml
+++ b/modules/bar/popouts/ActiveWindow.qml
@@ -46,7 +46,7 @@ Item {
                 StyledText {
                     Layout.fillWidth: true
                     text: Hypr.activeToplevel?.title ?? ""
-                    font.pointSize: Tokens.font.size.normal
+                    font: Tokens.font.body.medium
                     elide: Text.ElideRight
                 }
 
@@ -77,7 +77,7 @@ Item {
 
                     text: "chevron_right"
 
-                    font.pointSize: Tokens.font.size.large
+                    font: Tokens.font.icon.large
                 }
             }
         }
diff --git a/modules/bar/popouts/Audio.qml b/modules/bar/popouts/Audio.qml
index d558a105..76bdb04c 100644
--- a/modules/bar/popouts/Audio.qml
+++ b/modules/bar/popouts/Audio.qml
@@ -34,7 +34,7 @@ Item {
 
         StyledText {
             text: qsTr("Output device")
-            font.weight: 500
+            font: Tokens.font.body.builders.medium.weight(500).build()
         }
 
         Repeater {
@@ -55,7 +55,7 @@ Item {
         StyledText {
             Layout.topMargin: Tokens.spacing.medium
             text: qsTr("Input device")
-            font.weight: 500
+            font: Tokens.font.body.builders.medium.weight(500).build()
         }
 
         Repeater {
@@ -75,7 +75,7 @@ Item {
             Layout.topMargin: Tokens.spacing.medium
             Layout.bottomMargin: -Tokens.spacing.extraSmall
             text: qsTr("Volume (%1)").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
-            font.weight: 500
+            font: Tokens.font.body.builders.medium.weight(500).build()
         }
 
         CustomMouseArea {
diff --git a/modules/bar/popouts/Battery.qml b/modules/bar/popouts/Battery.qml
index f90f2ec3..29b1ab22 100644
--- a/modules/bar/popouts/Battery.qml
+++ b/modules/bar/popouts/Battery.qml
@@ -72,8 +72,7 @@ Column {
                         anchors.verticalCenter: parent.verticalCenter
                         text: qsTr("Performance Degraded")
                         color: Colours.palette.m3onError
-                        font.family: Tokens.font.family.mono
-                        font.weight: 500
+                        font: Tokens.font.mono.builders.medium.weight(500).build()
                     }
 
                     MaterialIcon {
@@ -214,7 +213,7 @@ Column {
             anchors.centerIn: parent
 
             text: parent.icon
-            font.pointSize: Tokens.font.size.large
+            font: Tokens.font.icon.large
             color: profiles.current === text ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
             fill: profiles.current === text ? 1 : 0
 
diff --git a/modules/bar/popouts/Bluetooth.qml b/modules/bar/popouts/Bluetooth.qml
index dd49ebe5..30113bd1 100644
--- a/modules/bar/popouts/Bluetooth.qml
+++ b/modules/bar/popouts/Bluetooth.qml
@@ -22,7 +22,7 @@ ColumnLayout {
         Layout.topMargin: Tokens.padding.medium
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("Bluetooth")
-        font.weight: 500
+        font: Tokens.font.body.builders.medium.weight(500).build()
     }
 
     Toggle {
@@ -57,7 +57,7 @@ ColumnLayout {
             return available;
         }
         color: Colours.palette.m3onSurfaceVariant
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     Repeater {
diff --git a/modules/bar/popouts/Network.qml b/modules/bar/popouts/Network.qml
index 0ca63c30..9aa9dd52 100644
--- a/modules/bar/popouts/Network.qml
+++ b/modules/bar/popouts/Network.qml
@@ -29,7 +29,7 @@ ColumnLayout {
         Layout.topMargin: visible ? Tokens.padding.medium : 0
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("Wireless")
-        font.weight: 500
+        font: Tokens.font.body.builders.medium.weight(500).build()
     }
 
     Toggle {
@@ -47,7 +47,7 @@ ColumnLayout {
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("%1 networks available").arg(Nmcli.networks.length) // qmllint disable missing-property
         color: Colours.palette.m3onSurfaceVariant
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     Repeater {
@@ -97,7 +97,7 @@ ColumnLayout {
             MaterialIcon {
                 visible: networkItem.modelData.isSecure
                 text: "lock"
-                font.pointSize: Tokens.font.size.small
+                font: Tokens.font.icon.small
             }
 
             StyledText {
@@ -106,7 +106,7 @@ ColumnLayout {
                 Layout.fillWidth: true
                 text: networkItem.modelData.ssid
                 elide: Text.ElideRight
-                font.weight: networkItem.modelData.active ? 500 : 400
+                font: Tokens.font.body.builders.medium.weight(networkItem.modelData.active ? 500 : 400).build()
                 color: networkItem.modelData.active ? Colours.palette.m3primary : Colours.palette.m3onSurface
             }
 
@@ -221,7 +221,7 @@ ColumnLayout {
         Layout.topMargin: visible ? Tokens.padding.medium : 0
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("Ethernet")
-        font.weight: 500
+        font: Tokens.font.body.builders.medium.weight(500).build()
     }
 
     StyledText {
@@ -231,7 +231,7 @@ ColumnLayout {
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("%1 devices available").arg(Nmcli.ethernetDevices.length)
         color: Colours.palette.m3onSurfaceVariant
-        font.pointSize: Tokens.font.size.small
+        font: Tokens.font.body.small
     }
 
     Repeater {
@@ -283,7 +283,7 @@ ColumnLayout {
                 Layout.fillWidth: true
                 text: ethernetItem.modelData.interface || qsTr("Unknown")
                 elide: Text.ElideRight
-                font.weight: ethernetItem.modelData.connected ? 500 : 400
+                font: Tokens.font.body.builders.medium.weight(ethernetItem.modelData.connected ? 500 : 400).build()
                 color: ethernetItem.modelData.connected ? Colours.palette.m3primary : Colours.palette.m3onSurface
             }
 
diff --git a/modules/bar/popouts/TrayMenu.qml b/modules/bar/popouts/TrayMenu.qml
index e707521d..2416d1c2 100644
--- a/modules/bar/popouts/TrayMenu.qml
+++ b/modules/bar/popouts/TrayMenu.qml
@@ -148,8 +148,7 @@ StackView {
                             id: labelMetrics
 
                             text: item.modelData.text
-                            font.pointSize: label.font.pointSize
-                            font.family: label.font.family
+                            font: label.font
 
                             elide: Text.ElideRight
                             elideWidth: root.Tokens.sizes.bar.trayMenuWidth - (icon.active ? icon.implicitWidth + label.anchors.leftMargin : 0) - (expand.active ? expand.implicitWidth + root.Tokens.spacing.medium : 0)
diff --git a/modules/bar/popouts/WirelessPassword.qml b/modules/bar/popouts/WirelessPassword.qml
index c06e8f7d..d99c293c 100644
--- a/modules/bar/popouts/WirelessPassword.qml
+++ b/modules/bar/popouts/WirelessPassword.qml
@@ -177,14 +177,13 @@ ColumnLayout {
             MaterialIcon {
                 Layout.alignment: Qt.AlignHCenter
                 text: "lock"
-                font.pointSize: Tokens.font.size.extraLarge * 2
+                font: Tokens.font.icon.builders.extraLarge.size(Tokens.font.icon.extraLarge.pointSize * 2).build()
             }
 
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
                 text: qsTr("Enter password")
-                font.pointSize: Tokens.font.size.large
-                font.weight: 500
+                font: Tokens.font.body.builders.large.weight(500).build()
             }
 
             StyledText {
@@ -201,7 +200,7 @@ ColumnLayout {
                     return qsTr("Network: Unknown");
                 }
                 color: Colours.palette.m3outline
-                font.pointSize: Tokens.font.size.small
+                font: Tokens.font.body.small
             }
 
             Timer {
@@ -249,8 +248,7 @@ ColumnLayout {
                     return "";
                 }
                 color: connectButton.hasError ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant
-                font.pointSize: Tokens.font.size.small
-                font.weight: 400
+                font: Tokens.font.body.builders.small.weight(400).build()
                 wrapMode: Text.WordWrap
                 Layout.maximumWidth: parent.width - Tokens.padding.extraLargeIncreased
             }
@@ -375,8 +373,7 @@ ColumnLayout {
                     anchors.centerIn: parent
                     text: qsTr("Password")
                     color: Colours.palette.m3outline
-                    font.pointSize: Tokens.font.size.normal
-                    font.family: Tokens.font.family.mono
+                    font: Tokens.font.mono.medium
                     opacity: passwordContainer.passwordBuffer ? 0 : 1
 
                     Behavior on opacity {
@@ -391,7 +388,7 @@ ColumnLayout {
 
                     anchors.centerIn: parent
                     implicitWidth: fullWidth
-                    implicitHeight: Tokens.font.size.normal
+                    implicitHeight: Tokens.font.body.medium.pointSize
 
                     orientation: Qt.Horizontal
                     spacing: Tokens.spacing.extraSmall
@@ -471,7 +468,7 @@ ColumnLayout {
                     id: cancelButton
 
                     Layout.fillWidth: true
-                    Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2
+                    Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
                     inactiveColour: Colours.palette.m3secondaryContainer
                     inactiveOnColour: Colours.palette.m3onSecondaryContainer
                     text: qsTr("Cancel")
@@ -486,7 +483,7 @@ ColumnLayout {
                     property bool hasError: false
 
                     Layout.fillWidth: true
-                    Layout.minimumHeight: Tokens.font.size.normal + Tokens.padding.medium * 2
+                    Layout.minimumHeight: Tokens.font.body.medium.pointSize + Tokens.padding.normal * 2
                     inactiveColour: Colours.palette.m3primary
                     inactiveOnColour: Colours.palette.m3onPrimary
                     text: qsTr("Connect")
diff --git a/modules/bar/popouts/kblayout/KbLayout.qml b/modules/bar/popouts/kblayout/KbLayout.qml
index 7ec78242..edf87cb4 100644
--- a/modules/bar/popouts/kblayout/KbLayout.qml
+++ b/modules/bar/popouts/kblayout/KbLayout.qml
@@ -27,7 +27,7 @@ ColumnLayout {
         Layout.topMargin: Tokens.padding.medium
         Layout.rightMargin: Tokens.padding.extraSmall
         text: qsTr("Keyboard Layouts")
-        font.weight: 500
+        font: Tokens.font.body.builders.medium.weight(500).build()
     }
 
     ListView {
@@ -155,7 +155,7 @@ ColumnLayout {
             Layout.fillWidth: true
             text: kb.activeLabel
             elide: Text.ElideRight
-            font.weight: 500
+            font: Tokens.font.body.builders.medium.weight(500).build()
             color: Colours.palette.m3primary
         }