[FIX] Wrong font-family order (#11191)

* fix body font family order

* Update variables.js

* Set new font stack where the old one is still used

packages/rocketchat-theme/server/variables.js

@@ -66,7 +66,7 @@ Object.keys(minorColors).forEach((key) => {
 	RocketChat.theme.addPublicColor(key, value, 'Old Colors (minor)', 'expression');
 });
 
-RocketChat.theme.addPublicFont('body-font-family', '-apple-system, BlinkMacSystemFont, Roboto, \'Helvetica Neue\', Arial, sans-serif, \'Apple Color Emoji\', \'Segoe UI\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\'');
+RocketChat.theme.addPublicFont('body-font-family', '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Helvetica Neue\', \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\', Arial, sans-serif');
 
 RocketChat.settings.add('theme-custom-css', '', {
 	group: 'Layout',

server/startup/migrations/v128.js

+RocketChat.Migrations.add({
+	version: 128,
+	up() {
+		const _id = 'theme-font-body-font-family';
+		const oldValue = '-apple-system, BlinkMacSystemFont, Roboto, \'Helvetica Neue\', Arial, sans-serif, \'Apple Color Emoji\', \'Segoe UI\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\'';
+		const newValue = '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Helvetica Neue\', \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\', Arial, sans-serif';
+
+		RocketChat.models.Settings.update({ _id, value: oldValue }, {
+			$set: {
+				value: newValue
+			}
+		});
+	}
+});