Merge pull request #2010 from jellyfin/remoto-sans

pull fonts from official repository

package.json

@@ -69,7 +69,6 @@
     "howler": "^2.2.1",
     "intersection-observer": "^0.11.0",
     "jellyfin-apiclient": "^1.4.2",
-    "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.5.1",
     "jstree": "^3.3.10",
     "libarchive.js": "^1.3.0",

src/bundle.js

@@ -90,12 +90,6 @@ _define('material-icons', function() {
     return materialIcons;
 });
 
-// noto font
-const noto = require('jellyfin-noto');
-_define('jellyfin-noto', function () {
-    return noto;
-});
-
 const epubjs = require('epubjs');
 _define('epubjs', function () {
     return epubjs;

src/config.json

@@ -22,6 +22,12 @@
       "id": "wmc"
     }
   ],
+  "fonts": [
+    "https://repo.jellyfin.org/releases/other/jellyfin-noto/font-faces.css",
+    "https://repo.jellyfin.org/releases/other/jellyfin-noto/css/KR.css",
+    "https://repo.jellyfin.org/releases/other/jellyfin-noto/css/JP.css",
+    "https://repo.jellyfin.org/releases/other/jellyfin-noto/css/SC.css"
+  ],
   "plugins": [
     "plugins/playAccessValidation/plugin",
     "plugins/experimentalWarnings/plugin",

src/scripts/autoThemes.js

@@ -1,11 +1,22 @@
 import * as userSettings from 'userSettings';
+import * as webSettings from 'webSettings';
 import skinManager from 'skinManager';
 import events from 'events';
 
-// Set the default theme when loading
+// set the default theme when loading
 skinManager.setTheme(userSettings.theme());
 
-// Set the user's prefered theme when signing in
+// set the saved theme once a user authenticates
 events.on(window.connectionManager, 'localusersignedin', function (e, user) {
     skinManager.setTheme(userSettings.theme());
 });
+
+webSettings.getFonts().then(fonts => {
+    for (const font of fonts) {
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.href = font;
+
+        document.getElementsByTagName('head')[0].appendChild(link);
+    }
+});

src/scripts/settings/webSettings.js

@@ -102,3 +102,12 @@ export function getPlugins() {
         return [];
     });
 }
+
+export function getFonts() {
+    return getConfig().then(config => {
+        return config.fonts;
+    }).catch(error => {
+        console.log('cannot get web config:', error);
+        return [];
+    });
+}

src/scripts/site.js

@@ -505,7 +505,6 @@ function initClient() {
                     'sortable',
                     'webcomponents',
                     'material-icons',
-                    'jellyfin-noto',
                     'date-fns',
                     'page',
                     'polyfill',
@@ -528,7 +527,7 @@ function initClient() {
         });
 
         promise = require(['fetch'])
-            .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => {
+            .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'css!assets/css/site'], (jQuery) => {
                 // Expose jQuery globally
                 window.$ = jQuery;
                 window.jQuery = jQuery;