initial users customs fonts

PainterNode/css/painter_node_fonts.css

@@ -0,0 +1,5 @@
+/* Default styles */
+@import url("https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap");
+
+/* User fonts */
+@import url("./painter_node_user_fonts.css");

PainterNode/css/painter_node_user_fonts.css

@@ -0,0 +1,26 @@
+/* Example add font file for different formats, and supports old browsers: */
+/*
+@font-face {
+    font-family: 'MyNameFont';
+    src: url('webfont.eot');
+    src: url('webfont.eot?#iefix') format('embedded-opentype'),
+         url('webfont.woff') format('woff'), 
+         url('webfont.ttf')  format('truetype'), 
+         url("webfont.otf") format("opentype");            
+         url('webfont.svg#svgFontName') format('svg'); 
+} 
+*/
+
+/* User fonts files */
+
+/* Pricedown font */
+@font-face {
+  font-family: "Pricedown";
+  src: url("../../fonts/pricedown.otf") format("opentype");
+}
+
+/* Harry_font__YOURSSINCERELYLARRY_ font */
+@font-face {
+  font-family: "Harry_font__YOURSSINCERELYLARRY_";
+  src: url("../../fonts/HarryFontYourssincerelylarry.ttf") format("truetype");
+}

PainterNode/js/painter_node.js

@@ -372,11 +372,31 @@ class Painter {
     });
 
     this.painter_bg_setting.appendChild(this.bgImageFile);
+
+    this.getLoadedFonts();
+
     this.changePropertyBrush();
     this.createBrushesToolbar();
     this.bindEvents();
   }
 
+  async getLoadedFonts() {
+    const getListFonts = async () => {
+      const fontFaces = await document.fonts.ready;
+      const loadedFonts = [];
+
+      document.fonts.forEach((font) => {
+        loadedFonts.push(font.family);
+      });
+      console.log("Loaded fonts");
+      return [...new Set(loadedFonts)];
+    };
+
+    await getListFonts().then((fonts) => {
+      fonts.forEach((font) => (this.fonts[font] = font));
+    });
+  }
+
   setValueElementsLS() {
     this.painter_wrapper_settings.remove();
     this.mainSettings();
@@ -993,8 +1013,10 @@ class Painter {
 
     // Select front event
     selectFontFamily.onchange = (e) => {
-      if (this.getActiveStyle("fontFamily") != selectFontFamily.value)
+      if (this.getActiveStyle("fontFamily") != selectFontFamily.value) {
         this.setActiveStyle("fontFamily", selectFontFamily.value);
+        this.uploadPaintFile(this.node.name);
+      }
     };
 
     property_textbox.append(
@@ -2528,6 +2550,7 @@ app.registerExtension({
   async init(app) {
     // Add styles
     addStylesheet("css/painternode/painter_node_styles.css", import.meta.url);
+    addStylesheet("css/painternode/painter_node_fonts.css", import.meta.url);
 
     // Add settings params painter node
     app.ui.settings.addSetting({

__init__.py

@@ -204,7 +204,7 @@ def install_node(nodeElement):
     log(f"* Node <{nodeElement}> is found, installing...")
     web_extensions_dir = os.path.join(extension_folder, extension_dirs[0])
 
-    extensions_dirs_copy = ["js", "css", "assets", "lib"]
+    extensions_dirs_copy = ["js", "css", "assets", "lib", "fonts"]
     for dir_name in extensions_dirs_copy:
         folder_curr = os.path.join(extension_folder, nodeElement, dir_name)
         if os.path.exists(folder_curr):