Don't load Roboto webfont when system font is used in the app (#4591)

* Don't load Roboto webfont when system font is used in the app

* remove trailing whitespace

app/javascript/styles/basics.scss

@@ -1,5 +1,4 @@
 body {
-  font-family: 'mastodon-font-sans-serif', sans-serif;
   background: $ui-base-color;
   background-size: cover;
   background-attachment: fixed;
@@ -14,6 +13,11 @@ 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;
+  }
+
   &.app-body {
     position: fixed;
     width: 100%;
@@ -69,7 +73,7 @@ button {
   justify-content: center;
 }
 
-.system-font {
+.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
@@ -83,3 +87,7 @@ button {
   // 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;
+}