From 78d40d402ecf38e8232feef16cdac8b175a5754d Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 17 Jul 2025 12:22:11 -0400
Subject: [PATCH] 4.77.9

* Fixed: Issue with chat disappearing after a recent Twitch update.
* Fixed: Various font size issues.
---
 package.json                                  |  2 +-
 src/modules/chat/index.js                     | 13 +++++--
 src/modules/chat/tokenizers.jsx               |  2 +-
 src/modules/emote_card/components/card.vue    | 14 ++++----
 .../emote_card/components/manage-ffz.vue      |  6 ++--
 .../emote_card/components/modifiers.vue       | 12 +++----
 .../emote_card/components/report-form.vue     |  6 ++--
 .../main_menu/components/action-editor.vue    | 34 +++++++++----------
 .../main_menu/components/addon-list.vue       |  8 ++---
 src/modules/main_menu/components/addon.vue    |  4 +--
 .../main_menu/components/async-text.vue       |  6 ++--
 .../main_menu/components/backup-restore.vue   |  2 +-
 .../components/badge-term-editor.vue          | 10 +++---
 .../main_menu/components/badge-visibility.vue |  6 ++--
 .../components/blocked-type-editor.vue        |  6 ++--
 .../main_menu/components/changelog.vue        | 18 +++++-----
 .../main_menu/components/chat-tester.vue      |  8 ++---
 .../main_menu/components/clear-settings.vue   |  6 ++--
 .../main_menu/components/emote-priorities.vue |  8 ++---
 .../main_menu/components/experiments.vue      | 18 +++++-----
 .../components/filter-rule-editor.vue         |  4 +--
 .../main_menu/components/home-page.vue        | 16 ++++-----
 .../main_menu/components/link-tester.vue      |  6 ++--
 .../main_menu/components/main-menu.vue        |  6 ++--
 src/modules/main_menu/components/md-page.vue  |  4 +--
 .../main_menu/components/menu-page.vue        |  8 ++---
 .../main_menu/components/profile-editor.vue   | 12 +++----
 .../main_menu/components/profile-manager.vue  | 18 +++++-----
 .../main_menu/components/profile-selector.vue |  6 ++--
 .../main_menu/components/reason-editor.vue    |  6 ++--
 .../main_menu/components/term-editor.vue      | 10 +++---
 .../main_menu/components/tooltip-tos.vue      |  2 +-
 .../components/translation-ui.vue             |  8 ++---
 .../viewer_cards/components/loading-tab.vue   |  4 +--
 src/sites/clips/line.jsx                      |  2 +-
 src/sites/player/metadata.jsx                 |  4 +--
 src/sites/twitch-twilight/modules/channel.jsx |  2 +-
 .../modules/chat/emote_menu.jsx               | 16 ++++-----
 .../twitch-twilight/modules/chat/input.jsx    |  2 +-
 .../twitch-twilight/modules/chat/line.js      |  4 +--
 .../modules/chat/settings_menu.jsx            |  4 +--
 .../modules/featured-follow.vue               |  4 +--
 .../modules/host_button/host-options.vue      |  4 +--
 .../twitch-twilight/modules/menu_button.jsx   |  8 ++---
 .../modules/video_chat/index.jsx              |  4 +--
 src/std-components/autocomplete.vue           |  6 ++--
 src/utilities/rich_tokens.js                  |  2 +-
 47 files changed, 184 insertions(+), 177 deletions(-)

diff --git a/package.json b/package.json
index 1fdf070b..cc39383a 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "frankerfacez",
 	"author": "Dan Salvato LLC",
-	"version": "4.77.8",
+	"version": "4.77.9",
 	"description": "FrankerFaceZ is a Twitch enhancement suite.",
 	"private": true,
 	"license": "Apache-2.0",
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index edc66288..77c79f10 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -1935,7 +1935,8 @@ export default class Chat extends Module {
 				is_action,
 				ffz_emotes: emotes,
 				timestamp: msg.sentAt && msg.sentAt.getTime(),
-				deleted: false
+				deleted: false,
+				toJSON: () => null
 			};
 
 		out.user.color = out.user.chatColor;
@@ -1982,7 +1983,7 @@ export default class Chat extends Module {
 		if ( ! reply )
 			return null;
 
-		return [
+		const out = [
 			{
 				type: 'reply',
 				text: reply.parentDisplayName,
@@ -1996,6 +1997,9 @@ export default class Chat extends Module {
 				text: ' '
 			}
 		];
+
+		out.toJSON = () => null;
+		return out;
 	}
 
 
@@ -2576,7 +2580,10 @@ export default class Chat extends Module {
 			}
 		}
 
-		return tokens || [];
+		tokens = tokens || [];
+		tokens.toJSON = () => null
+
+		return tokens;
 	}
 
 
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index de509c7d..a2a173fe 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -174,7 +174,7 @@ export const Links = {
 					{content}
 					{url_notice ? <div class="tw-mg-t-05 tw-border-t tw-pd-t-05 tw-align-center">
 						{url_notice}
-						<div class=" tw-font-size-8">
+						<div class=" ffz-font-size-8">
 							{this.i18n.t('tooltip.shift-detail', '(Shift for Details)')}
 						</div>
 					</div> : null}
diff --git a/src/modules/emote_card/components/card.vue b/src/modules/emote_card/components/card.vue
index 0d28a2fd..24ec92e2 100644
--- a/src/modules/emote_card/components/card.vue
+++ b/src/modules/emote_card/components/card.vue
@@ -12,7 +12,7 @@
 			<div class="tw-flex tw-flex-column tw-full-height tw-full-width viewer-card__overlay">
 				<div class="tw-align-center tw-border-radius-medium tw-align-items-center tw-c-background-alt tw-c-text-base tw-flex tw-flex-grow-1 tw-flex-row tw-full-width tw-justify-content-start tw-pd-05 tw-relative viewer-card__banner">
 					<div class="tw-mg-l-05 tw-mg-y-05 tw-inline-flex viewer-card-drag-cancel">
-						<figure v-if="! loaded" class="tw-mg-x-1 tw-font-size-2 ffz-i-zreknarf loading" />
+						<figure v-if="! loaded" class="tw-mg-x-1 ffz-font-size-2 ffz-i-zreknarf loading" />
 						<figure v-else class="ffz-avatar tw-flex tw-align-items-center" :style="imageStyle">
 							<img
 								v-if="emote.src"
@@ -23,7 +23,7 @@
 					</div>
 					<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-l-1 tw-mg-y-05 viewer-card__display-name">
 						<h4
-							class="tw-inline tw-ellipsis"
+							class="tw-inline tw-ellipsis ffz-font-size-4"
 							:class="{'tw-italic': hasOriginalName}"
 							:title="emote ? emote.name : raw_emote.name"
 						>
@@ -31,18 +31,18 @@
 						</h4>
 						<P
 							v-if="! loaded"
-							class="tw-c-text-alt-2 tw-font-size-6"
+							class="tw-c-text-alt-2 ffz-font-size-6"
 						>
 							{{ t('emote-card.loading', 'Loading...') }}
 						</P>
 						<p
 							v-if="loaded && emote.source"
-							class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis"
+							class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis"
 							:title="emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source"
 						>
 							{{ emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source }}
 						</p>
-						<p v-if="hasOriginalName" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis">
+						<p v-if="hasOriginalName" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
 							<t-list
 								phrase="emote.original-name"
 								default="Name: {name}"
@@ -52,7 +52,7 @@
 								</template>
 							</t-list>
 						</p>
-						<p v-if="loaded && emote.owner" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis">
+						<p v-if="loaded && emote.owner" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
 							<t-list
 								phrase="emote-card.owner"
 								default="Owner: {owner}"
@@ -68,7 +68,7 @@
 								</template>
 							</t-list>
 						</p>
-						<p v-if="loaded && emote.artist" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis">
+						<p v-if="loaded && emote.artist" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
 							<t-list
 								phrase="emote-card.artist"
 								default="Artist: {artist}"
diff --git a/src/modules/emote_card/components/manage-ffz.vue b/src/modules/emote_card/components/manage-ffz.vue
index 972e5d77..3a333e37 100644
--- a/src/modules/emote_card/components/manage-ffz.vue
+++ b/src/modules/emote_card/components/manage-ffz.vue
@@ -9,7 +9,7 @@
 			@click="toggle"
 		>
 			<div class="tw-flex-grow-1">
-				<h4>{{ t('emote-card.manage', 'Manage My Collections') }}</h4>
+				<h4 class="ffz-font-size-4">{{ t('emote-card.manage', 'Manage My Collections') }}</h4>
 			</div>
 
 			<figure
@@ -24,7 +24,7 @@
 			classes="ffz-mh-30"
 		>
 			<div v-if="loading" class="tw-align-center tw-pd-1">
-				<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+				<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 			</div>
 			<div v-else-if="error" class="tw-align-center tw-pd-1">
 				<div class="tw-mg-t-1 tw-mg-b-2">
@@ -128,4 +128,4 @@ export default {
 
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/emote_card/components/modifiers.vue b/src/modules/emote_card/components/modifiers.vue
index 90ee5648..1f84f7a7 100644
--- a/src/modules/emote_card/components/modifiers.vue
+++ b/src/modules/emote_card/components/modifiers.vue
@@ -8,7 +8,7 @@
 			@click="toggle"
 		>
 			<div class="tw-flex-grow-1">
-				<h4>{{ t('emote-card.modifiers', 'Modifiers') }}</h4>
+				<h4 class="ffz-font-size-4">{{ t('emote-card.modifiers', 'Modifiers') }}</h4>
 			</div>
 
 			<figure
@@ -48,15 +48,15 @@
 				</figure>
 			</div>
 			<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-x-1">
-				<h4 class="tw-inline" :title="mod.name">{{ mod.name }}</h4>
+				<h4 class="tw-inline ffz-font-size-4" :title="mod.name">{{ mod.name }}</h4>
 				<p
 					v-if="mod.source"
-					class="tw-c-text-alt-2 tw-font-size-6"
+					class="tw-c-text-alt-2 ffz-font-size-6"
 					:title="mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source"
 				>
 					{{ mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source }}
 				</p>
-				<p v-if="mod.owner" class="tw-c-text-alt-2 tw-font-size-6">
+				<p v-if="mod.owner" class="tw-c-text-alt-2 ffz-font-size-6">
 					<t-list
 						phrase="emote-card.owner"
 						default="Owner: {owner}"
@@ -72,7 +72,7 @@
 						</template>
 					</t-list>
 				</p>
-				<p v-if="mod.artist" class="tw-c-text-alt-2 tw-font-size-6">
+				<p v-if="mod.artist" class="tw-c-text-alt-2 ffz-font-size-6">
 					<t-list
 						phrase="emote-card.artist"
 						default="Artist: {artist}"
@@ -182,4 +182,4 @@ export default {
 
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/emote_card/components/report-form.vue b/src/modules/emote_card/components/report-form.vue
index 2c841b28..4b3cbe05 100644
--- a/src/modules/emote_card/components/report-form.vue
+++ b/src/modules/emote_card/components/report-form.vue
@@ -2,7 +2,7 @@
 	<section class="viewer-card__actions tw-bottom-0 tw-pd-1">
 		<template v-if="loading">
 			<div class="tw-align-center tw-pd-1">
-				<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+				<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 			</div>
 		</template>
 		<template v-else-if="errorNoUser">
@@ -54,7 +54,7 @@
 
 			<textarea
 				v-model="message"
-				class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+				class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 				:placeholder="t('emote-card.report.placeholder', 'Enter a report message here.')"
 			/>
 
@@ -254,4 +254,4 @@ export default {
 
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/action-editor.vue b/src/modules/main_menu/components/action-editor.vue
index 6d85a8e9..be6a2357 100644
--- a/src/modules/main_menu/components/action-editor.vue
+++ b/src/modules/main_menu/components/action-editor.vue
@@ -6,7 +6,7 @@
 
 		<div class="tw-flex-grow-1">
 			<template v-if="! editing">
-				<h4>{{ title }}</h4>
+				<h4 class="ffz-font-size-4">{{ title }}</h4>
 				<div class="description">
 					{{ description }}
 				</div>
@@ -19,13 +19,13 @@
 					ref="json"
 					v-model="json"
 					readonly
-					class="tw-full-width tw-full-height tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+					class="tw-full-width tw-full-height tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 					@focus="$event.target.select()"
 				/>
 			</template>
 			<template v-else>
 				<section>
-					<h5>{{ t('setting.actions.appearance', 'Appearance') }}</h5>
+					<h5 class="ffz-font-size-5">{{ t('setting.actions.appearance', 'Appearance') }}</h5>
 
 					<div class="tw-flex tw-align-items-center">
 						<label for="tooltip">
@@ -34,7 +34,7 @@
 
 						<input
 							v-model="edit_data.appearance.tooltip"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
 						>
 					</div>
 
@@ -47,7 +47,7 @@
 							id="renderer_type"
 							ref="renderer_type"
 							v-model="edit_data.appearance.type"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option
 								v-for="(r, key) in data.renderers"
@@ -88,7 +88,7 @@
 				</section>
 
 				<section class="tw-mg-t-1 tw-border-t tw-pd-t-1">
-					<h5>{{ t('setting.actions.visibility', 'Visibility') }}</h5>
+					<h5 class="ffz-font-size-5">{{ t('setting.actions.visibility', 'Visibility') }}</h5>
 
 					<div class="tw-flex tw-align-items-center">
 						<label for="vis_mod">
@@ -98,7 +98,7 @@
 						<select
 							id="vis_mod"
 							v-model="edit_data.display.mod"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -120,7 +120,7 @@
 						<select
 							id="vis_mod_icons"
 							v-model="edit_data.display.mod_icons"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -142,7 +142,7 @@
 						<select
 							id="vis_following"
 							v-model="edit_data.display.following"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -164,7 +164,7 @@
 						<select
 							id="vis_deleted"
 							v-model="edit_data.display.deleted"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -186,7 +186,7 @@
 						<select
 							id="vis_emote"
 							v-model="edit_data.display.emoteOnly"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -208,7 +208,7 @@
 						<select
 							id="vis_slow"
 							v-model="edit_data.display.slowMode"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -230,7 +230,7 @@
 						<select
 							id="vis_subs"
 							v-model="edit_data.display.followersOnly"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -252,7 +252,7 @@
 						<select
 							id="vis_subs"
 							v-model="edit_data.display.subsMode"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -274,7 +274,7 @@
 						<select
 							id="vis_r9k"
 							v-model="edit_data.display.r9kMode"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option :value="undefined" selected>
 								{{ t('setting.unset', 'Unset') }}
@@ -380,7 +380,7 @@
 				</section>
 
 				<section class="tw-mg-t-1 tw-border-t tw-pd-t-1">
-					<h5>{{ t('setting.actions.action', 'Action') }}</h5>
+					<h5 class="ffz-font-size-5">{{ t('setting.actions.action', 'Action') }}</h5>
 
 					<div class="tw-flex tw-align-items-center">
 						<label for="action_type">
@@ -390,7 +390,7 @@
 						<select
 							id="action_type"
 							v-model="edit_data.action"
-							class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+							class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
 						>
 							<option
 								v-for="(a, key) in data.actions"
diff --git a/src/modules/main_menu/components/addon-list.vue b/src/modules/main_menu/components/addon-list.vue
index 47008e15..7404142a 100644
--- a/src/modules/main_menu/components/addon-list.vue
+++ b/src/modules/main_menu/components/addon-list.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--addons tw-border-t tw-pd-y-1">
 		<div v-if="reload" class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1">
-			<h4 class="ffz-i-attention">
+			<h4 class="ffz-i-attention ffz-font-size-4">
 				{{ t('addon.refresh-needed', 'You must refresh your Twitch pages for some changes to take effect.') }}
 			</h4>
 
@@ -34,7 +34,7 @@
 			</div>
 			<select
 				v-model="sort_by"
-				class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
+				class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
 			>
 				<option :value="0">
 					{{ t('addon.sort-name', 'Sort By: Name') }}
@@ -49,7 +49,7 @@
 		</div>
 
 		<div v-if="! ready" class="tw-align-center tw-pd-1">
-			<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+			<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 		</div>
 		<div v-else>
 			<addon
@@ -103,7 +103,7 @@
 							<input
 								ref="unlisted"
 								:placeholder="t('addon.unlisted.id', 'add-on id')"
-								class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+								class="tw-flex-grow-1 tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 								@keydown.enter="addUnlisted"
 							>
 							<button
diff --git a/src/modules/main_menu/components/addon.vue b/src/modules/main_menu/components/addon.vue
index 633355f8..e1e39f12 100644
--- a/src/modules/main_menu/components/addon.vue
+++ b/src/modules/main_menu/components/addon.vue
@@ -28,11 +28,11 @@
 
 		<div class="tw-flex-grow-1">
 			<div class="tw-border-b tw-mg-b-05">
-				<h4>
+				<h4 class="ffz-font-size-4">
 					{{ addon.name_i18n ? t(addon.name_i18n, addon.name) : addon.name }}
 					<span
 						v-if="addon.dev || addon.unlisted "
-						class="tw-c-text-alt-2 tw-font-size-6"
+						class="tw-c-text-alt-2 ffz-font-size-6"
 					>
 						({{ addon.id }})
 					</span>
diff --git a/src/modules/main_menu/components/async-text.vue b/src/modules/main_menu/components/async-text.vue
index ab33aafc..c53175d1 100644
--- a/src/modules/main_menu/components/async-text.vue
+++ b/src/modules/main_menu/components/async-text.vue
@@ -18,7 +18,7 @@
 				<input
 					ref="url_box"
 					:value="url"
-					class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+					class="tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 					type="text"
 					readonly
 					@focusin="selectURL"
@@ -38,9 +38,9 @@
 				</button>
 			</div>
 		</div>
-		<div class="tw-c-background-alt-2 tw-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
+		<div class="tw-c-background-alt-2 ffz-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
 			<div v-if="loading" class="tw-align-center">
-				<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+				<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 			</div>
 			<code v-else>{{ text }}</code>
 		</div>
diff --git a/src/modules/main_menu/components/backup-restore.vue b/src/modules/main_menu/components/backup-restore.vue
index f33da7a4..910e49e8 100644
--- a/src/modules/main_menu/components/backup-restore.vue
+++ b/src/modules/main_menu/components/backup-restore.vue
@@ -31,7 +31,7 @@
 		</div>
 
 		<div v-if="error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1">
-			<h3 class="ffz-i-attention">
+			<h3 class="ffz-i-attention ffz-font-size-3">
 				{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
 			</h3>
 			<div v-if="error_desc">
diff --git a/src/modules/main_menu/components/badge-term-editor.vue b/src/modules/main_menu/components/badge-term-editor.vue
index b0c6997f..d25e17d4 100644
--- a/src/modules/main_menu/components/badge-term-editor.vue
+++ b/src/modules/main_menu/components/badge-term-editor.vue
@@ -14,16 +14,16 @@
 				/>
 			</div>
 			<div class="tw-flex-grow-1 tw-mg-r-05">
-				<h4 v-if="! editing && ! current" class="ffz-monospace">
+				<h4 v-if="! editing && ! current" class="ffz-monospace ffz-font-size-4">
 					<pre>{{ t('setting.terms.invalid-badge', 'unknown/unloaded badge') }}</pre>
 				</h4>
-				<h4 v-if="! editing && current">
+				<h4 v-if="! editing && current" class="ffz-font-size-4">
 					{{ current.name }}
 				</h4>
 				<select
 					v-if="editing"
 					v-model="edit_data.v"
-					class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
+					class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
 				>
 					<option v-if="adding" value="">
 						{{ t('setting.terms.please-select', 'Please select an option.') }}
@@ -71,7 +71,7 @@
 					v-model.number="edit_data.p"
 					type="number"
 					step="1"
-					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
 					style="width: 5rem"
 				>
 				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
@@ -303,4 +303,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/badge-visibility.vue b/src/modules/main_menu/components/badge-visibility.vue
index d1274361..6551c917 100644
--- a/src/modules/main_menu/components/badge-visibility.vue
+++ b/src/modules/main_menu/components/badge-visibility.vue
@@ -88,7 +88,7 @@
 								class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0"
 							/>
 							<div>
-								<h5>{{ i.name }}</h5>
+								<h5 class="ffz-font-size-5">{{ i.name }}</h5>
 								<section
 									v-if="i.versions && (i.always_versions || i.versions.length > 1)"
 									class="tw-mg-t-05"
@@ -116,7 +116,7 @@
 					</label>
 				</li>
 			</ul>
-			<div v-else class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-pd-05">
+			<div v-else class="tw-c-text-alt-2 ffz-font-size-4 tw-align-center tw-pd-05">
 				{{ t('setting.badges.hidden', '{count,plural,one{# badge is} other{# badges are} } hidden in this set', {
 					count: sec.badges.length
 				}) }}
@@ -192,4 +192,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/blocked-type-editor.vue b/src/modules/main_menu/components/blocked-type-editor.vue
index e4621c05..d2fcb8b3 100644
--- a/src/modules/main_menu/components/blocked-type-editor.vue
+++ b/src/modules/main_menu/components/blocked-type-editor.vue
@@ -2,13 +2,13 @@
 	<div class="ffz--term ffz--blocked-type">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
 			<div class="tw-flex-grow-1 tw-mg-r-05">
-				<h4 v-if="! editing">
+				<h4 v-if="! editing" class="ffz-font-size-4">
 					{{ display.v }}
 				</h4>
 				<select
 					v-if="editing"
 					v-model="edit_data.v"
-					class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
+					class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
 				>
 					<option v-if="adding" value="">
 						{{ t('setting.terms.please-select', 'Please select an option.') }}
@@ -128,4 +128,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/changelog.vue b/src/modules/main_menu/components/changelog.vue
index a00af932..5ebcfc56 100644
--- a/src/modules/main_menu/components/changelog.vue
+++ b/src/modules/main_menu/components/changelog.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--changelog tw-border-t tw-pd-t-1">
 		<div class="tw-align-center">
-			<h3 v-if="addon" class="tw-mg-b-1 tw-flex tw-align-items-center tw-justify-content-center">
+			<h3 v-if="addon" class="tw-mg-b-1 tw-flex tw-align-items-center tw-justify-content-center ffz-font-size-3">
 				<figure
 					v-if="addon.icon"
 					class="ffz-avatar ffz-avatar--size-30 tw-mg-r-05"
@@ -15,10 +15,10 @@
 					name: addon.name
 				}) }}
 			</h3>
-			<h3 v-else-if="addons" class="tw-mg-b-1">
+			<h3 v-else-if="addons" class="tw-mg-b-1 ffz-font-size-3">
 				{{ t('setting.add_ons.changelog.title', 'Add-Ons Changelog') }}
 			</h3>
-			<h3 v-else class="tw-mg-b-1">
+			<h3 v-else class="tw-mg-b-1 ffz-font-size-3">
 				{{ t('home.changelog', 'Changelog') }}
 			</h3>
 		</div>
@@ -63,16 +63,16 @@
 					</figure>
 					<a
 						v-if="commit.title && commit.title_nav"
-						class="tw-font-size-5 ffz-link ffz-link--inherit"
+						class="ffz-font-size-5 ffz-link ffz-link--inherit"
 						href="#"
 						@click.prevent="titleNav(commit.title_nav)"
 					>
 						{{ commit.title }}
 					</a>
-					<div v-else-if="commit.title" class="tw-font-size-5">
+					<div v-else-if="commit.title" class="ffz-font-size-5">
 						{{ commit.title }}
 					</div>
-					<div v-if="commit.version" class="tw-font-size-4 tw-mg-l-05">
+					<div v-if="commit.version" class="ffz-font-size-4 tw-mg-l-05">
 						<span class="tw-c-text-alt-2">v</span>{{ commit.version }}
 					</div>
 					<div v-if="commit.author" class="tw-mg-l-05">
@@ -109,7 +109,7 @@
 					</div>
 					<div
 						v-if="commit.hash"
-						class="tw-font-size-8 tw-c-text-alt-2"
+						class="ffz-font-size-8 tw-c-text-alt-2"
 					>
 						@<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="ffz-link ffz-link--inherit ffz-tooltip" data-tooltip-type="link">{{ commit.hash }}</a>
 					</div>
@@ -131,7 +131,7 @@
 			<div v-if="error">
 				{{ t('home.changelog.error', 'An error occurred loading changes from GitHub.') }}
 			</div>
-			<h1 v-else-if="loading" class="tw-mg-5 ffz-i-zreknarf loading" />
+			<h1 v-else-if="loading" class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 			<div v-else-if="! more">
 				{{ t('home.changelog.no-more', 'There are no more commits to load.') }}
 			</div>
@@ -388,4 +388,4 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/chat-tester.vue b/src/modules/main_menu/components/chat-tester.vue
index 0d1e321f..8d38aa4c 100644
--- a/src/modules/main_menu/components/chat-tester.vue
+++ b/src/modules/main_menu/components/chat-tester.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="ffz--chat-tester">
 		<div v-if="context.exclusive" class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
-			<h3 class="ffz-i-attention">
+			<h3 class="ffz-i-attention ffz-font-size-3">
 				{{ t('debug.chat-tester.exclusive', "Hey! This won't work here!") }}
 			</h3>
 			<markdown :source="t('debug.chat-tester.exclusive-explain', 'This feature does not work when the FFZ Control Center is popped out. It needs to be used in a window where you can see chat.')" />
@@ -16,7 +16,7 @@
 				<select
 					id="selector"
 					ref="selector"
-					class="tw-full-width tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
+					class="tw-full-width tw-border-top-left-radius-medium tw-border-top-right-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
 					@change="onSelectChange"
 				>
 					<option :selected="is_custom" value="custom">
@@ -33,13 +33,13 @@
 				</select>
 				<input
 					ref="topic"
-					class="tw-block tw-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p"
+					class="tw-block ffz-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p"
 					@blur="updateMessage"
 					@input="onMessageChange"
 				/>
 				<textarea
 					ref="message"
-					class="tw-block tw-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium"
+					class="tw-block ffz-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium"
 					rows="10"
 					@blur="updateMessage"
 					@input="onMessageChange"
diff --git a/src/modules/main_menu/components/clear-settings.vue b/src/modules/main_menu/components/clear-settings.vue
index 2d31af97..e716646d 100644
--- a/src/modules/main_menu/components/clear-settings.vue
+++ b/src/modules/main_menu/components/clear-settings.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--clear-settings tw-pd-t-05">
 		<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
-			<h3 class="ffz-i-attention">
+			<h3 class="ffz-i-attention ffz-font-size-3">
 				{{ t('setting.clear.warning', 'Be careful! This is permanent.') }}
 			</h3>
 			<markdown :source="t('setting.clear.warning-explain', 'Deleting your data with this tool cannot be reversed. Make sure you have a backup!')" />
@@ -41,7 +41,7 @@
 				<input
 					v-model="entered"
 					type="text"
-					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
 					autocapitalize="off"
 					autocorrect="off"
 				>
@@ -138,4 +138,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/emote-priorities.vue b/src/modules/main_menu/components/emote-priorities.vue
index 58f78d3d..88ece29c 100644
--- a/src/modules/main_menu/components/emote-priorities.vue
+++ b/src/modules/main_menu/components/emote-priorities.vue
@@ -31,7 +31,7 @@
 		</div>
 
 		<div ref="list" class="ffz--action-list">
-			<div v-if="! val.length" class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-1">
+			<div v-if="! val.length" class="tw-c-text-alt-2 ffz-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-1">
 				{{ t('setting.priorities.none', 'no priorities are defined in this profile') }}
 
 				<div class="tw-mg-t-1">
@@ -51,7 +51,7 @@
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-start handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
 						<span class="ffz-i-ellipsis-vert" />
 					</div>
-					<figure v-if="provider.font_icon" class="tw-font-size-2 tw-mg-r-1" :class="provider.font_icon" />
+					<figure v-if="provider.font_icon" class="ffz-font-size-2 tw-mg-r-1" :class="provider.font_icon" />
 					<div v-else-if="provider.icon" class="tw-flex-shrink-0 ffz-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
 						<img
 							:src="provider.icon"
@@ -59,10 +59,10 @@
 						/>
 					</div>
 					<div>
-						<h4 v-if="! provider.name">
+						<h4 v-if="! provider.name" class="ffz-font-size-4">
 							{{ t('emote-source.unknown', 'Unknown ({id})', provider) }}
 						</h4>
-						<h4 v-else>{{
+						<h4 v-else class="ffz-font-size-4">{{
 							provider.i18n_key
 								? t(provider.i18n_key, provider.name, provider)
 								: provider.name
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
index 9cda4183..57aafaf9 100644
--- a/src/modules/main_menu/components/experiments.vue
+++ b/src/modules/main_menu/components/experiments.vue
@@ -10,7 +10,7 @@
 			</div>
 			<select
 				ref="sort_select"
-				class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
+				class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
 				@change="onSort"
 			>
 				<option :selected="sort_by === 0">
@@ -40,7 +40,7 @@
 			</div>
 		</div>
 
-		<h3 class="tw-mg-b-1">
+		<h3 class="tw-mg-b-1 ffz-font-size-3">
 			<span>
 				{{ t('setting.experiments.ffz', 'FrankerFaceZ Experiments') }}
 			</span>
@@ -60,7 +60,7 @@
 			>
 				<div class="tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
 					<div class="tw-flex-grow-1">
-						<h4>{{ exp.name ? exp.name : key }}</h4>
+						<h4 class="ffz-font-size-4">{{ exp.name ? exp.name : key }}</h4>
 						<div v-if="exp.description" class="description">
 							{{ exp.description }}
 						</div>
@@ -69,7 +69,7 @@
 					<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
 						<select
 							:data-key="key"
-							class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
+							class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
 							@change="onChange($event)"
 						>
 							<option
@@ -103,7 +103,7 @@
 			</div>
 		</div>
 
-		<h3 class="tw-mg-t-5 tw-mg-b-1">
+		<h3 class="tw-mg-t-5 tw-mg-b-1 ffz-font-size-3">
 			<span>
 				{{ t('setting.experiments.twitch', 'Twitch Experiments') }}
 			</span>
@@ -117,7 +117,7 @@
 
 		<section v-if="experiments_locked">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
-				<h3 class="ffz-i-attention">
+				<h3 class="ffz-i-attention ffz-font-size-3">
 					{{ t('setting.dev-warning', "It's dangerous to go at all.") }}
 				</h3>
 				<markdown :source="t('setting.dev-warning.explain', 'Be careful, this is an advanced feature intended for developer use only. Normal users should steer clear. Adjusting your experiments can have unexpected impacts on your Twitch experience. FrankerFaceZ is not responsible for any issues you encounter as a result of tampering with experiments, and we will not provide support.\n\nIf you\'re sure about this, please type `{code}` into the box below and hit enter.', {code})" />
@@ -127,7 +127,7 @@
 				<input
 					ref="code"
 					type="text"
-					class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-b-5"
+					class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-b-5"
 					autocapitalize="off"
 					autocorrect="off"
 					@keydown.enter="enterCode"
@@ -160,7 +160,7 @@
 						</div>
 
 						<div class="tw-flex-grow-1">
-							<h4>{{ exp.name }}</h4>
+							<h4 class="ffz-font-size-4">{{ exp.name }}</h4>
 							<div class="description">
 								{{ exp.remainder }}
 							</div>
@@ -169,7 +169,7 @@
 						<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
 							<select
 								:data-key="key"
-								class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
+								class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
 								@change="onTwitchChange($event)"
 							>
 								<option
diff --git a/src/modules/main_menu/components/filter-rule-editor.vue b/src/modules/main_menu/components/filter-rule-editor.vue
index 36d0f437..e39fef41 100644
--- a/src/modules/main_menu/components/filter-rule-editor.vue
+++ b/src/modules/main_menu/components/filter-rule-editor.vue
@@ -1,7 +1,7 @@
 <template>
 	<section class="ffz--filter-rule-editor tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-mg-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap">
 		<div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-c-text-alt-2">
-			<h5 class="ffz-i-ellipsis-vert" />
+			<h5 class="ffz-i-ellipsis-vert ffz-font-size-5" />
 		</div>
 
 		<div v-if="! component" class="tw-flex tw-flex-grow-1 tw-align-self-center tw-align-items-center">
@@ -134,4 +134,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/home-page.vue b/src/modules/main_menu/components/home-page.vue
index 4bf58fdb..d15086fb 100644
--- a/src/modules/main_menu/components/home-page.vue
+++ b/src/modules/main_menu/components/home-page.vue
@@ -2,7 +2,7 @@
 	<div class="ffz--home tw-flex tw-flex-nowrap">
 		<div class="tw-flex-grow-1">
 			<div class="tw-align-center">
-				<h2 class="ffz-i-zreknarf ffz-i-pd-1">
+				<h2 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-2">
 					FrankerFaceZ
 				</h2>
 				<span class="tw-c-text-alt">
@@ -18,7 +18,7 @@
 				v-if="unseen"
 				class="tw-pd-t-1 tw-border-t tw-mg-t-1"
 			>
-				<h3 class="tw-pd-b-05">
+				<h3 class="tw-pd-b-05 ffz-font-size-3">
 					{{ t('home.new-settings', 'New Settings') }}
 				</h3>
 
@@ -57,7 +57,7 @@
 				v-if="addons"
 				class="tw-pd-t-1 tw-border-t tw-mg-t-1"
 			>
-				<h3 class="tw-pd-b-05">
+				<h3 class="tw-pd-b-05 ffz-font-size-3">
 					{{ t('home.addon-updates', 'Updated Add-Ons') }}
 				</h3>
 
@@ -101,7 +101,7 @@
 				v-if="new_addons"
 				class="tw-pd-t-1 tw-border-t tw-mg-t-1"
 			>
-				<h3 class="tw-pd-b-05">
+				<h3 class="tw-pd-b-05 ffz-font-size-3">
 					{{ t('home.addon-new', 'New Add-Ons') }}
 				</h3>
 
@@ -151,7 +151,7 @@
 					rel="noopener"
 				>
 					<span class="tw-button__icon tw-pd-05">
-						<figure class="ffz-i-zreknarf tw-font-size-3" />
+						<figure class="ffz-i-zreknarf ffz-font-size-3" />
 					</span>
 				</a>
 				<a
@@ -162,7 +162,7 @@
 					rel="noopener noreferrer"
 				>
 					<span class="tw-button__icon tw-pd-05-1">
-						<figure class="ffz-i-discord tw-font-size-3" />
+						<figure class="ffz-i-discord ffz-font-size-3" />
 					</span>
 				</a>
 				<!--a
@@ -173,7 +173,7 @@
 					rel="noopener noreferrer"
 				>
 					<span class="tw-button__icon tw-pd-05">
-						<figure class="ffz-i-twitter tw-font-size-3" />
+						<figure class="ffz-i-twitter ffz-font-size-3" />
 					</span>
 				</a-->
 				<a
@@ -184,7 +184,7 @@
 					rel="noopener noreferrer"
 				>
 					<span class="tw-button__icon tw-pd-05">
-						<figure class="ffz-i-github tw-font-size-3" />
+						<figure class="ffz-i-github ffz-font-size-3" />
 					</span>
 				</a>
 			</div>
diff --git a/src/modules/main_menu/components/link-tester.vue b/src/modules/main_menu/components/link-tester.vue
index c0d878f3..4c3a9eb4 100644
--- a/src/modules/main_menu/components/link-tester.vue
+++ b/src/modules/main_menu/components/link-tester.vue
@@ -207,9 +207,9 @@
 				{{ t('debug.link-provider.raw', 'Raw Data') }}
 			</label>
 			<div class="tw-full-width tw-overflow-hidden ffz--example-report">
-				<div v-if="url" class="tw-c-background-alt-2 tw-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
+				<div v-if="url" class="tw-c-background-alt-2 ffz-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
 					<div v-if="raw_loading" class="tw-align-center">
-						<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+						<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 					</div>
 					<code v-else-if="typeof raw_data === 'string'">{{ raw_data }}</code>
 					<code v-else v-html="highlightJson(raw_data, true)"></code>
@@ -600,4 +600,4 @@ export default {
 
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 7c2b919b..ee81b27f 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -7,7 +7,7 @@
 		@click="onFocus"
 	>
 		<header ref="header" class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
-			<h3 class="ffz-i-zreknarf ffz-i-pd-1">
+			<h3 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-3">
 				FrankerFaceZ
 			</h3>
 			<div class="tw-flex-grow-1 tw-pd-x-2">
@@ -22,7 +22,7 @@
 							v-model="query"
 							:placeholder="t('main-menu.search', 'Search Settings')"
 							type="search"
-							class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
+							class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
 							autocapitalize="off"
 							autocorrect="off"
 							autocomplete="off"
@@ -349,4 +349,4 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/md-page.vue b/src/modules/main_menu/components/md-page.vue
index 1d8a0d17..71fb1a3d 100644
--- a/src/modules/main_menu/components/md-page.vue
+++ b/src/modules/main_menu/components/md-page.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--home tw-border-t tw-pd-y-1">
 		<div v-if="loading" class="tw-align-center tw-pd-1">
-			<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+			<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 		</div>
 		<markdown v-else :source="t(`home.${key}`, md)" />
 	</div>
@@ -33,4 +33,4 @@ export default {
 		}
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/menu-page.vue b/src/modules/main_menu/components/menu-page.vue
index d6c9f6a4..d4934060 100644
--- a/src/modules/main_menu/components/menu-page.vue
+++ b/src/modules/main_menu/components/menu-page.vue
@@ -46,7 +46,7 @@
 		</header>
 		<section v-if="context.currentProfile.ephemeral && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-attention">
+				<h3 class="ffz-i-attention ffz-font-size-3">
 					{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
 				</h3>
 
@@ -63,7 +63,7 @@
 		</section>
 		<section v-if="(! context.currentProfile.live || ! context.currentProfile.toggled) && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-attention">
+				<h3 class="ffz-i-attention ffz-font-size-3">
 					{{ t('setting.profiles.inactive', "This profile is not active.") }}
 				</h3>
 
@@ -83,7 +83,7 @@
 		</section>
 		<section v-if="context.currentProfile.url && ! context.currentProfile.pause_updates && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-attention">
+				<h3 class="ffz-i-attention ffz-font-size-3">
 					{{ t('setting.profiles.updates', 'This profile will update automatically.') }}
 				</h3>
 
@@ -96,7 +96,7 @@
 		</section>
 		<section v-if="context.has_update" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-arrows-cw">
+				<h3 class="ffz-i-arrows-cw ffz-font-size-3">
 					{{ t('setting.update', 'There is an update available.') }}
 				</h3>
 
diff --git a/src/modules/main_menu/components/profile-editor.vue b/src/modules/main_menu/components/profile-editor.vue
index 7faec92d..53050177 100644
--- a/src/modules/main_menu/components/profile-editor.vue
+++ b/src/modules/main_menu/components/profile-editor.vue
@@ -2,7 +2,7 @@
 	<div class="ffz--profile-editor">
 		<section v-if="isEphemeral" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-attention">
+				<h3 class="ffz-i-attention ffz-font-size-3">
 					{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
 				</h3>
 
@@ -54,7 +54,7 @@
 
 		<div v-if="export_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
 			<section class="tw-flex-grow-1">
-				<h4 class="ffz-i-attention">
+				<h4 class="ffz-i-attention ffz-font-size-4">
 					{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
 				</h4>
 				<div v-if="export_error_message">
@@ -102,7 +102,7 @@
 					ref="name"
 					:disabled="isEphemeral"
 					v-model="name"
-					class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+					class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 				>
 			</div>
 
@@ -116,7 +116,7 @@
 					ref="desc"
 					:disabled="isEphemeral"
 					v-model="desc"
-					class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+					class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 				/>
 			</div>
 
@@ -161,7 +161,7 @@
 					id="ffz:editor:url"
 					readonly
 					:value="url"
-					class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+					class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 				>
 			</div>
 
@@ -412,4 +412,4 @@ export default {
 
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/profile-manager.vue b/src/modules/main_menu/components/profile-manager.vue
index 4828f2be..3046ef5e 100644
--- a/src/modules/main_menu/components/profile-manager.vue
+++ b/src/modules/main_menu/components/profile-manager.vue
@@ -2,7 +2,7 @@
 	<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1">
 		<section v-if="context.exclusive" class="tw-pd-b-2">
 			<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
-				<h3 class="ffz-i-info">
+				<h3 class="ffz-i-info ffz-font-size-3">
 					{{ t('setting.context-difference', 'Your Profiles might not match.') }}
 				</h3>
 
@@ -78,7 +78,7 @@
 								<input
 									ref="paste"
 									:placeholder="t('setting.paste-url.url', '[url]')"
-									class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+									class="tw-flex-grow-1 tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
 									@keydown.enter="doImportURL"
 								>
 								<button
@@ -120,7 +120,7 @@
 
 		<div v-if="import_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
 			<section class="tw-flex-grow-1">
-				<h4 class="ffz-i-attention">
+				<h4 class="ffz-i-attention ffz-font-size-4">
 					{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
 				</h4>
 				<div v-if="import_error_message">
@@ -156,7 +156,7 @@
 
 		<div v-if="import_profiles" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
 			<section class="tw-flex-grow-1">
-				<h4 class="ffz-i-upload">
+				<h4 class="ffz-i-upload ffz-font-size-4">
 					{{ t('setting.backup-restore.pick-profile', 'Please select a profile to import.') }}
 				</h4>
 
@@ -187,7 +187,7 @@
 
 		<div v-if="import_profile" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
 			<section class="tw-flex-grow-1">
-				<h4 class="ffz-i-help">
+				<h4 class="ffz-i-help ffz-font-size-4">
 					{{ t('setting.backup-restore.confirm-updates', 'The profile you are importing has an automatic update URL. Do you want the profile to keep itself up to date?') }}
 				</h4>
 
@@ -237,7 +237,7 @@
 
 					<div
 						v-if="p.ephemeral"
-						class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container tw-font-size-4"
+						class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container ffz-font-size-4"
 					>
 						<span class="ffz-i-user-secret" />
 						<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
@@ -247,7 +247,7 @@
 
 					<div
 						v-if="p.url"
-						class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container tw-font-size-4"
+						class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container ffz-font-size-4"
 					>
 						<span :class="`ffz-i-download-cloud${p.pause_updates ? ' ffz-unmatched-item' : ''}`" />
 						<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
@@ -259,7 +259,7 @@
 					</div>
 
 					<div class="tw-flex-grow-1">
-						<h4>{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
+						<h4 class="ffz-font-size-4">{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
 						<div v-if="p.description" class="description">
 							{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
 						</div>
@@ -574,4 +574,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/profile-selector.vue b/src/modules/main_menu/components/profile-selector.vue
index d56ec0ff..0563c0e9 100644
--- a/src/modules/main_menu/components/profile-selector.vue
+++ b/src/modules/main_menu/components/profile-selector.vue
@@ -4,7 +4,7 @@
 			ref="button"
 			:class="{active: opened}"
 			tabindex="0"
-			class="tw-flex tw-align-items-center tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
+			class="tw-flex tw-align-items-center tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
 			@keyup.up.stop.prevent="focusShow"
 			@keyup.left.stop.prevent="focusShow"
 			@keyup.down.stop.prevent="focusShow"
@@ -86,7 +86,7 @@
 									</div>
 								</div>
 
-								<h4>{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
+								<h4 class="ffz-font-size-4">{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
 								<div v-if="p.description" class="description">
 									{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
 								</div>
@@ -268,4 +268,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/reason-editor.vue b/src/modules/main_menu/components/reason-editor.vue
index 9bfad549..cbdf6625 100644
--- a/src/modules/main_menu/components/reason-editor.vue
+++ b/src/modules/main_menu/components/reason-editor.vue
@@ -2,7 +2,7 @@
 	<div class="ffz--reason">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
 			<div class="tw-flex-grow-1 tw-mg-r-05">
-				<h4 v-if="! editing" class="ffz-monospace">
+				<h4 v-if="! editing" class="ffz-monospace ffz-font-size-4">
 					{{ title }}
 				</h4>
 				<input
@@ -10,7 +10,7 @@
 					v-model="edit_data.text"
 					:placeholder="adding ? t('setting.reasons.add-placeholder', 'Add a new reason') : edit_data.text"
 					type="text"
-					class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
 					autocapitalize="off"
 					autocorrect="off"
 				>
@@ -141,4 +141,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/term-editor.vue b/src/modules/main_menu/components/term-editor.vue
index f775d79a..0d2d8eca 100644
--- a/src/modules/main_menu/components/term-editor.vue
+++ b/src/modules/main_menu/components/term-editor.vue
@@ -14,7 +14,7 @@
 				</div>
 			</div>
 			<div class="tw-flex-grow-1">
-				<h4 v-if="! editing" class="ffz-monospace">
+				<h4 v-if="! editing" class="ffz-monospace ffz-font-size-4">
 					<pre>{{ term.v }}</pre>
 				</h4>
 				<input
@@ -22,7 +22,7 @@
 					v-model="edit_data.v"
 					:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
 					type="text"
-					class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
 					autocapitalize="off"
 					autocorrect="off"
 				>
@@ -32,7 +32,7 @@
 				<select
 					v-else
 					v-model="edit_data.t"
-					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset"
 				>
 					<option value="text">
 						{{ t('setting.terms.type.text', 'Text') }}
@@ -76,7 +76,7 @@
 					v-model.number="edit_data.p"
 					type="number"
 					step="1"
-					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
 					style="width: 5rem"
 				>
 				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
@@ -404,4 +404,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/main_menu/components/tooltip-tos.vue b/src/modules/main_menu/components/tooltip-tos.vue
index 0e4c519d..f6841014 100644
--- a/src/modules/main_menu/components/tooltip-tos.vue
+++ b/src/modules/main_menu/components/tooltip-tos.vue
@@ -1,6 +1,6 @@
 <template lang="html">
 	<section class="ffz--widget ffz--service-tos">
-		<h4>{{ key }}</h4>
+		<h4 class="ffz-font-size-4">{{ key }}</h4>
 		<markdown class="tw-mg-b-05" :source="linkText" />
 		<div v-if="hasAccepted">
 			{{ t('tooltip.has-accepted', 'You have accepted the Terms of Service.') }}
diff --git a/src/modules/translation_ui/components/translation-ui.vue b/src/modules/translation_ui/components/translation-ui.vue
index edb1adea..8810c820 100644
--- a/src/modules/translation_ui/components/translation-ui.vue
+++ b/src/modules/translation_ui/components/translation-ui.vue
@@ -4,7 +4,7 @@
 		class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
 	>
 		<header class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
-			<h3 class="ffz-i-zreknarf ffz-i-pd-1">{{ t('i18n.ui.title', 'Translation Tester') }}</h3>
+			<h3 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-3">{{ t('i18n.ui.title', 'Translation Tester') }}</h3>
 			<div class="tw-flex-grow-1 tw-pd-x-2">
 				<div class="tw-search-input">
 					<label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('i18n.ui.search', 'Search Strings') }}</label>
@@ -17,7 +17,7 @@
 							v-model="query"
 							:placeholder="t('i18n.ui.search', 'Search Strings')"
 							type="search"
-							class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
+							class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
 							autocapitalize="off"
 							autocorrect="off"
 							autocomplete="off"
@@ -99,7 +99,7 @@
 					ref="pager"
 					:value="page"
 					:max="pages"
-					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
 					type="number"
 					min="1"
 					@keydown.enter="closePage"
@@ -549,4 +549,4 @@ export default {
 		},
 	}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/modules/viewer_cards/components/loading-tab.vue b/src/modules/viewer_cards/components/loading-tab.vue
index cd0fd933..22c253ce 100644
--- a/src/modules/viewer_cards/components/loading-tab.vue
+++ b/src/modules/viewer_cards/components/loading-tab.vue
@@ -1,5 +1,5 @@
 <template functional>
 	<div class="tw-align-center tw-pd-1">
-		<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+		<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 	</div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/sites/clips/line.jsx b/src/sites/clips/line.jsx
index 2fcd9c25..5d2f8f57 100644
--- a/src/sites/clips/line.jsx
+++ b/src/sites/clips/line.jsx
@@ -107,7 +107,7 @@ export default class Line extends Module {
 						user_class = user_class.join(' ');
 
 					const user_props = {
-						className: `clip-chat__message-author tw-font-size-5 ffz-link notranslate tw-strong${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''} ${user_class ?? ''}`,
+						className: `clip-chat__message-author ffz-font-size-5 ffz-link notranslate tw-strong${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''} ${user_class ?? ''}`,
 						href: `https://www.twitch.tv/${user.login}/clips`,
 						style: { color }
 					};
diff --git a/src/sites/player/metadata.jsx b/src/sites/player/metadata.jsx
index a8ed6042..b66d1606 100644
--- a/src/sites/player/metadata.jsx
+++ b/src/sites/player/metadata.jsx
@@ -120,7 +120,7 @@ export default class Metadata extends Module {
 					</div>
 					<div class="tw-flex tw-align-items-center">
 						<input
-							class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-full-width"
+							class="tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-full-width"
 							type="text"
 							value={url}
 							onFocus={e => e.target.select()}
@@ -730,4 +730,4 @@ export default class Metadata extends Module {
 			return destroy();
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/sites/twitch-twilight/modules/channel.jsx b/src/sites/twitch-twilight/modules/channel.jsx
index 1a3553cc..c9544c55 100644
--- a/src/sites/twitch-twilight/modules/channel.jsx
+++ b/src/sites/twitch-twilight/modules/channel.jsx
@@ -373,7 +373,7 @@ export default class Channel extends Module {
 			const login = el._ffz_link_login = props.channelLogin;
 			if ( login ) {
 				const make_link = (link, text) => {
-					const a = <a href={link} class="tw-c-text-alt-2 tw-interactive tw-pd-x-1 tw-font-size-5">{text}</a>;
+					const a = <a href={link} class="tw-c-text-alt-2 tw-interactive tw-pd-x-1 ffz-font-size-5">{text}</a>;
 					a.addEventListener('click', event => {
 						if ( event.ctrlKey || event.shiftKey || event.altKey )
 							return;
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index 2219296b..7952ab77 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -2680,7 +2680,7 @@ export default class EmoteMenu extends Module {
 
 			renderLoading() { // eslint-disable-line class-methods-use-this
 				return (<div class="tw-align-center tw-pd-1">
-					<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
+					<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
 					{t.i18n.t('emote-menu.loading', 'Loading...')}
 				</div>)
 			}
@@ -2834,7 +2834,7 @@ export default class EmoteMenu extends Module {
 										<div class="tw-flex">
 											<input
 												type="text"
-												class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
+												class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
 												placeholder={
 													is_emoji ?
 														t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
@@ -2883,7 +2883,7 @@ export default class EmoteMenu extends Module {
 												data-title={t.i18n.t('emote-menu.favorites', 'Favorites')}
 												onClick={this.clickTab}
 											>
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-star" />
 												</div>
 											</button>
@@ -2897,7 +2897,7 @@ export default class EmoteMenu extends Module {
 												data-title={t.i18n.t('emote-menu.channel', 'Channel')}
 												onClick={this.clickTab}
 											>
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-camera" />
 												</div>
 											</button>
@@ -2912,7 +2912,7 @@ export default class EmoteMenu extends Module {
 												onClick={this.clickTab}
 											>
 												{this.state.hasNewEffects && (<div class="ffz-new-indicator" />)}
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-fx" />
 												</div>
 											</button>
@@ -2926,7 +2926,7 @@ export default class EmoteMenu extends Module {
 												data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')}
 												onClick={this.clickTab}
 											>
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-channels" />
 												</div>
 											</button>
@@ -2940,7 +2940,7 @@ export default class EmoteMenu extends Module {
 												data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
 												onClick={this.clickTab}
 											>
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-smile" />
 												</div>
 											</button>
@@ -2953,7 +2953,7 @@ export default class EmoteMenu extends Module {
 												data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
 												onClick={this.clickSettings}
 											>
-												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
 													<figure class="ffz-i-cog" />
 												</div>
 											</button>
diff --git a/src/sites/twitch-twilight/modules/chat/input.jsx b/src/sites/twitch-twilight/modules/chat/input.jsx
index 2f7eb79b..99c71a56 100644
--- a/src/sites/twitch-twilight/modules/chat/input.jsx
+++ b/src/sites/twitch-twilight/modules/chat/input.jsx
@@ -877,7 +877,7 @@ export default class Input extends Module {
 						</div>
 						{args}
 					</div>
-					<p class="tw-c-text-alt-2 tw-font-size-7">{ cmd.description }</p>
+					<p class="tw-c-text-alt-2 ffz-font-size-7">{ cmd.description }</p>
 				</div>);
 			}
 	}
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 00cf34b4..3377ff29 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -452,7 +452,7 @@ export default class ChatLine extends Module {
 
 				if ( mystery )
 					target.push(e('span', {
-						className: `tw-pd-l-05 tw-font-size-4 ffz-i-${expanded ? 'down' : 'right'}-dir`
+						className: `tw-pd-l-05 ffz-font-size-4 ffz-i-${expanded ? 'down' : 'right'}-dir`
 					}));
 
 				const out = [
@@ -1170,7 +1170,7 @@ other {# messages were deleted by a moderator.}
 									username,
 									want_source_tip
 										? e('div', {
-											className: 'tw-font-size-8 tw-mg-t-05'
+											className: 'ffz-font-size-8 tw-mg-t-05'
 										}, t.i18n.t('chat.sent-from-source', 'Sent from {source}', {source: source.displayName ?? source.login}))
 										: null
 									]
diff --git a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
index 6d472802..58e41e4a 100644
--- a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
@@ -158,7 +158,7 @@ export default class SettingsMenu extends Module {
 
 				return (<div class="ffz-identity">
 					<div class="tw-mg-y-05 tw-pd-x-05">
-						<p class="tw-c-text-alt-2 tw-font-size-6 tw-strong tw-upcase">
+						<p class="tw-c-text-alt-2 ffz-font-size-6 tw-strong tw-upcase">
 							{ t.i18n.t('chat.identity-menu', 'Chat Identity') }
 						</p>
 					</div>
@@ -339,7 +339,7 @@ export default class SettingsMenu extends Module {
 
 		const out = (<div class="ffz--badge-selector tw-border-b tw-mg-b-1">
 			<div class="tw-mg-y-05 tw-pd-x-05">
-				<p class="tw-c-text-alt-2 tw-font-size-6 tw-strong tw-upcase">
+				<p class="tw-c-text-alt-2 ffz-font-size-6 tw-strong tw-upcase">
 					{ this.i18n.t('chat.ffz-badge.title', 'FrankerFaceZ Badge') }
 				</p>
 			</div>
diff --git a/src/sites/twitch-twilight/modules/featured-follow.vue b/src/sites/twitch-twilight/modules/featured-follow.vue
index 61036167..0754b5c8 100644
--- a/src/sites/twitch-twilight/modules/featured-follow.vue
+++ b/src/sites/twitch-twilight/modules/featured-follow.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz-featured-follow tw-c-background-base">
 		<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
-			<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
+			<h4 class="ffz-font-size-4">{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
 
 			<div class="tw-flex-grow-1 tw-pd-x-2" />
 			<button
@@ -26,7 +26,7 @@
 								<div class="ffz-channel-avatar">
 									<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><img :src="user.avatar"></a>
 								</div>
-								<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">{{ user.displayName }}</p></a>
+								<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 ffz-font-size-5">{{ user.displayName }}</p></a>
 								<div class="tw-flex-grow-1 tw-pd-x-2" />
 
 								<div v-if="user.error">
diff --git a/src/sites/twitch-twilight/modules/host_button/host-options.vue b/src/sites/twitch-twilight/modules/host_button/host-options.vue
index 05346613..09781ad7 100644
--- a/src/sites/twitch-twilight/modules/host_button/host-options.vue
+++ b/src/sites/twitch-twilight/modules/host_button/host-options.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz-auto-host-options tw-c-background-base">
 		<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
-			<h4>{{ t('metadata.host.title', 'Auto Host Management') }}</h4>
+			<h4 class="ffz-font-size-4">{{ t('metadata.host.title', 'Auto Host Management') }}</h4>
 		</header>
 		<div
 			v-show="activeTab === 'auto-host'"
@@ -32,7 +32,7 @@
 										<div class="ffz-channel-avatar">
 											<img :src="host.profileImageURL" :alt="host.displayName + '(' + host.login + ')'">
 										</div>
-										<p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">
+										<p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tffz-font-size-5">
 											{{ host.login }}
 										</p>
 										<div class="tw-flex-grow-1 tw-pd-x-2" />
diff --git a/src/sites/twitch-twilight/modules/menu_button.jsx b/src/sites/twitch-twilight/modules/menu_button.jsx
index 9c7b99aa..0542b17a 100644
--- a/src/sites/twitch-twilight/modules/menu_button.jsx
+++ b/src/sites/twitch-twilight/modules/menu_button.jsx
@@ -439,12 +439,12 @@ export default class MenuButton extends Module {
 				<div class="tw-flex tw-align-items-start">
 					{data.icon && (
 						typeof data.icon === 'string' ?
-							<figure class={`tw-font-size-3 tw-pd-r-1 ${data.icon}`} /> :
+							<figure class={`ffz-font-size-3 tw-pd-r-1 ${data.icon}`} /> :
 							data.icon
 					)}
 					{ data.render ? data.render.call(this, data) : null }
 					{ (data.title || data.text) ? (<div class="tw-flex-grow-1">
-						{ data.title ? (<header class="tw-semibold tw-font-size-3 tw-pd-b-05">
+						{ data.title ? (<header class="tw-semibold ffz-font-size-3 tw-pd-b-05">
 							{ data.title_i18n ? this.i18n.tList(data.title_i18n, data.title, data) : data.title}
 						</header>) : null }
 						{ data.text ? (<span class={`${data.lines ? 'ffz--line-clamp' : ''}`} style={{'--ffz-lines': data.lines}}>
@@ -724,7 +724,7 @@ export default class MenuButton extends Module {
 			profiles.push(<div class="tw-relative tw-border-b tw-pd-y-05 tw-pd-x-1 tw-flex">
 				{toggle}
 				<div>
-					<h4>{ profile.i18n_key ? this.i18n.t(profile.i18n_key, profile.name, profile) : profile.name }{profile.ephemeral && (<div
+					<h4 class="ffz-font-size-4">{ profile.i18n_key ? this.i18n.t(profile.i18n_key, profile.name, profile) : profile.name }{profile.ephemeral && (<div
 						class="tw-inline tw-mg-l-05 ffz-il-tooltip__container ffz--profile-row__icon ffz-i-user-secret tw-relative"
 					>
 						<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
@@ -759,7 +759,7 @@ export default class MenuButton extends Module {
 							</div>
 						</div>
 						<div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center">
-							<h5 class="tw-align-center tw-c-text-alt tw-semibold">
+							<h5 class="tw-align-center tw-c-text-alt tw-semibold ffz-font-size-5">
 								{ this.i18n.t('site.menu_button.profiles', 'Profiles') }
 							</h5>
 						</div>
diff --git a/src/sites/twitch-twilight/modules/video_chat/index.jsx b/src/sites/twitch-twilight/modules/video_chat/index.jsx
index 8030cbec..ee96ed30 100644
--- a/src/sites/twitch-twilight/modules/video_chat/index.jsx
+++ b/src/sites/twitch-twilight/modules/video_chat/index.jsx
@@ -357,7 +357,7 @@ export default class VideoChatHook extends Module {
 					<button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}>
 						<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
 					</button>
-					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative ffz-il-tooltip__container">
+					<span class="tw-c-text-alt-2 ffz-font-size-7 tw-mg-l-05 tw-relative ffz-il-tooltip__container">
 						• { t.i18n.t('video-chat.time', '{time,humantime} ago', {
 							time: msg.timestamp
 						}) }
@@ -397,7 +397,7 @@ export default class VideoChatHook extends Module {
 								<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
 									<button class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive" onClick={this.onTimestampClickHandler}>
 										<div class="tw-pd-x-05">
-											<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p>
+											<p class="ffz-font-size-7">{print_duration(context.comment.contentOffset)}</p>
 										</div>
 									</button>
 									<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">
diff --git a/src/std-components/autocomplete.vue b/src/std-components/autocomplete.vue
index 5d196e6f..aa4f3cf0 100644
--- a/src/std-components/autocomplete.vue
+++ b/src/std-components/autocomplete.vue
@@ -12,7 +12,7 @@
 					:placeholder="placeholder"
 					:class="[hasIcon ? 'tw-pd-l-3' : 'tw-pd-l-1']"
 					type="search"
-					class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-r-1 tw-pd-y-05"
+					class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-r-1 tw-pd-y-05"
 					autocapitalize="off"
 					autocorrect="off"
 					autocomplete="off"
@@ -39,7 +39,7 @@
 						{{ t('autocomplete.empty', 'There are no results.') }}
 					</div>
 					<div v-else-if="! hasItems && loading" class="tw-align-center tw-c-text-alt-2 tw-pd-05">
-						<h3 class="ffz-i-zreknarf loading" />
+						<h3 class="ffz-i-zreknarf loading ffz-font-size-3" />
 					</div>
 					<button
 						v-for="(item, idx) of filteredItems"
@@ -424,4 +424,4 @@ export default {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/utilities/rich_tokens.js b/src/utilities/rich_tokens.js
index ed888965..4fb04ad2 100644
--- a/src/utilities/rich_tokens.js
+++ b/src/utilities/rich_tokens.js
@@ -1437,7 +1437,7 @@ TOKEN_TYPES.style = function(token, createElement, ctx) {
 	if ( token.size ) {
 		if ( typeof token.size === 'string' ) {
 			if ( VALID_SIZES.includes(token.size) )
-				classes.push(`tw-font-size-${token.size}`);
+				classes.push(`ffz-font-size-${token.size}`);
 			else
 				style.fontSize = token.size;
 		} else