diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js
index 34b59fcc5..8f971ae67 100644
--- a/app/javascript/mastodon/features/ui/index.js
+++ b/app/javascript/mastodon/features/ui/index.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import classNames from 'classnames';
 import NotificationsContainer from './containers/notifications_container';
 import PropTypes from 'prop-types';
 import LoadingBarContainer from './containers/loading_bar_container';
@@ -43,7 +42,6 @@ import {
 import '../../components/status';
 
 const mapStateToProps = state => ({
-  systemFontUi: state.getIn(['meta', 'system_font_ui']),
   isComposing: state.getIn(['compose', 'is_composing']),
 });
 
@@ -58,7 +56,6 @@ export default class UI extends React.PureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
-    systemFontUi: PropTypes.bool,
     isComposing: PropTypes.bool,
     location: PropTypes.object,
   };
@@ -197,12 +194,8 @@ export default class UI extends React.PureComponent {
     const { width, draggingOver } = this.state;
     const { children } = this.props;
 
-    const className = classNames('ui', {
-      'system-font': this.props.systemFontUi,
-    });
-
     return (
-      <div className={className} ref={this.setRef}>
+      <div className='ui' ref={this.setRef}>
         <TabsBar />
         <ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}>
           <WrappedSwitch>
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index 6e87157ec..f18a32201 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -1,4 +1,5 @@
 body {
+  font-family: 'mastodon-font-sans-serif', sans-serif;
   background: $ui-base-color;
   background-size: cover;
   background-attachment: fixed;
@@ -13,9 +14,19 @@ body {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent;
 
-  // This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI
-  &:not(.app-body) {
-    font-family: 'mastodon-font-sans-serif', sans-serif;
+  &.system-font {
+    // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+    // -apple-system => Safari <11 specific
+    // BlinkMacSystemFont => Chrome <56 on macOS specific
+    // Segoe UI => Windows 7/8/10
+    // Oxygen => KDE
+    // Ubuntu => Unity/Ubuntu
+    // Cantarell => GNOME
+    // Fira Sans => Firefox OS
+    // Droid Sans => Older Androids (<4.0)
+    // Helvetica Neue => Older macOS <10.11
+    // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif;
   }
 
   &.app-body {
@@ -72,22 +83,3 @@ button {
   align-items: center;
   justify-content: center;
 }
-
-.ui.system-font {
-  // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
-  // -apple-system => Safari <11 specific
-  // BlinkMacSystemFont => Chrome <56 on macOS specific
-  // Segoe UI => Windows 7/8/10
-  // Oxygen => KDE
-  // Ubuntu => Unity/Ubuntu
-  // Cantarell => GNOME
-  // Fira Sans => Firefox OS
-  // Droid Sans => Older Androids (<4.0)
-  // Helvetica Neue => Older macOS <10.11
-  // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
-  font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif;
-}
-
-.ui:not(.system-font) {
-  font-family: 'mastodon-font-sans-serif', sans-serif;
-}
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 0ac5e8319..32ffcc688 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -19,7 +19,6 @@ class InitialStateSerializer < ActiveModel::Serializer
       store[:boost_modal]    = object.current_account.user.setting_boost_modal
       store[:delete_modal]   = object.current_account.user.setting_delete_modal
       store[:auto_play_gif]  = object.current_account.user.setting_auto_play_gif
-      store[:system_font_ui] = object.current_account.user.setting_system_font_ui
     end
 
     store
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 82b20810a..0ba0ffc37 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -35,6 +35,7 @@
     = yield :header_tags
 
   - body_classes ||= @body_classes
+  - body_classes += ' system-font' if current_account&.user&.setting_system_font_ui
 
   %body{ class: add_rtl_body_class(body_classes) }
     = content_for?(:content) ? yield(:content) : yield