Adding a "font-family" property for text objects. (#1311)

- Tiled displays your system fonts.
- Computers have different sets of fonts. Therefore, browsers never rely on system fonts
- Which means if you select a font in Tiled, it is quite unlikely it will render properly in WorkAdventure

To circumvent this problem, in your text object in Tiled, you can now add an additional property: `font-family`.

The `font-family` property can contain any "web-font" that can be loaded by your browser.

This allows us to use the "Press Start 2P" 8px font in text objects, which renders way better than the default "Sans serif" font of your browser.

front/src/Phaser/Components/TextUtils.ts

@@ -1,35 +1,43 @@
-import type {ITiledMapObject} from "../Map/ITiledMap";
-import type {GameScene} from "../Game/GameScene";
+import type { ITiledMapObject } from "../Map/ITiledMap";
+import type { GameScene } from "../Game/GameScene";
+import { type } from "os";
 
 export class TextUtils {
     public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
         if (object.text === undefined) {
-            throw new Error('This object has not textual representation.');
+            throw new Error("This object has not textual representation.");
         }
         const options: {
-            fontStyle?: string,
-            fontSize?: string,
-            fontFamily?: string,
-            color?: string,
-            align?: string,
+            fontStyle?: string;
+            fontSize?: string;
+            fontFamily?: string;
+            color?: string;
+            align?: string;
             wordWrap?: {
-                width: number,
-                useAdvancedWrap?: boolean
-            }
+                width: number;
+                useAdvancedWrap?: boolean;
+            };
         } = {};
         if (object.text.italic) {
-            options.fontStyle = 'italic';
+            options.fontStyle = "italic";
         }
         // Note: there is no support for "strikeout" and "underline"
         let fontSize: number = 16;
         if (object.text.pixelsize) {
             fontSize = object.text.pixelsize;
         }
-        options.fontSize = fontSize + 'px';
+        options.fontSize = fontSize + "px";
         if (object.text.fontfamily) {
-            options.fontFamily = '"'+object.text.fontfamily+'"';
+            options.fontFamily = '"' + object.text.fontfamily + '"';
         }
-        let color = '#000000';
+        if (object.properties !== undefined) {
+            for (const property of object.properties) {
+                if (property.name === "font-family" && typeof property.value === "string") {
+                    options.fontFamily = property.value;
+                }
+            }
+        }
+        let color = "#000000";
         if (object.text.color !== undefined) {
             color = object.text.color;
         }
@@ -38,7 +46,7 @@ export class TextUtils {
             options.wordWrap = {
                 width: object.width,
                 //useAdvancedWrap: true
-            }
+            };
         }
         if (object.text.halign !== undefined) {
             options.align = object.text.halign;