feat(options): can set font family for labels (default Times New Roman)

part of #477

src/MusicalScore/Graphical/EngravingRules.ts

@@ -190,6 +190,7 @@ export class EngravingRules {
     private defaultColorStem: string;
     private defaultColorLabel: string;
     private defaultColorTitle: string;
+    private defaultFontFamily: string;
     private maxMeasureToDrawIndex: number;
     private minMeasureToDrawIndex: number;
     /** Whether to render a label for the composer of the piece at the top of the sheet. */
@@ -408,6 +409,7 @@ export class EngravingRules {
         this.defaultColorStem = this.defaultColorNotehead;
         this.defaultColorLabel = this.defaultColorNotehead;
         this.defaultColorTitle = this.defaultColorNotehead;
+        this.defaultFontFamily = "Times New Roman"; // what OSMD was initially optimized for
         this.maxMeasureToDrawIndex = Number.MAX_VALUE;
         this.minMeasureToDrawIndex = 0;
         this.renderComposer = true;
@@ -1408,6 +1410,12 @@ export class EngravingRules {
     public set DefaultColorTitle(value: string) {
         this.defaultColorTitle = value;
     }
+    public get DefaultFontFamily(): string {
+        return this.defaultFontFamily;
+    }
+    public set DefaultFontFamily(value: string) {
+        this.defaultFontFamily = value;
+    }
     public get MaxMeasureToDrawIndex(): number {
         return this.maxMeasureToDrawIndex;
     }

src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -6,6 +6,7 @@ import {FontStyles} from "../../../Common/Enums/FontStyles";
 import {Fonts} from "../../../Common/Enums/Fonts";
 import {RectangleF2D} from "../../../Common/DataObjects/RectangleF2D";
 import {PointF2D} from "../../../Common/DataObjects/PointF2D";
+import { EngravingRules } from "..";
 
 export class SvgVexFlowBackend extends VexFlowBackend {
 
@@ -57,7 +58,7 @@ export class SvgVexFlowBackend extends VexFlowBackend {
             this.ctx.attributes.fill = color;
             this.ctx.attributes.stroke = color;
         }
-        this.ctx.setFont("Times New Roman", fontHeight, VexFlowConverter.fontStyle(fontStyle));
+        this.ctx.setFont(EngravingRules.Rules.DefaultFontFamily, fontHeight, VexFlowConverter.fontStyle(fontStyle));
         // font size is set by VexFlow in `pt`. This overwrites the font so it's set to px instead
         this.ctx.attributes["font-size"] = `${fontHeight}px`;
         this.ctx.state["font-size"] = `${fontHeight}px`;

src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

@@ -652,7 +652,7 @@ export class VexFlowConverter {
     public static font(fontSize: number, fontStyle: FontStyles = FontStyles.Regular, font: Fonts = Fonts.TimesNewRoman): string {
         let style: string = "normal";
         let weight: string = "normal";
-        const family: string = "'Times New Roman'";
+        const family: string = "'" + EngravingRules.Rules.DefaultFontFamily + "'"; // default "'Times New Roman'"
 
         switch (fontStyle) {
             case FontStyles.Bold:
@@ -672,7 +672,7 @@ export class VexFlowConverter {
                 break;
         }
 
-        switch (font) {
+        switch (font) { // currently not used
             case Fonts.Kokila:
                 // TODO Not Supported
                 break;

src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -33,6 +33,11 @@ export interface IOSMDOptions {
     defaultColorLabel?: string;
     /** Default color for labels in the title. Overrides defaultColorLabel for title labels like composer. Default black (undefined). */
     defaultColorTitle?: string;
+    /** Default font used for text and labels, e.g. title or lyrics. Default Times New Roman
+     * Note that OSMD originally always used Times New Roman, so things like layout and spacing may still be optimized for it.
+     * Valid options are CSS font families available in the browser used for rendering, e.g. Times New Roman, Helvetica.
+     */
+    defaultFontFamily?: string;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
     /** Follow Cursor */

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -316,6 +316,9 @@ export class OpenSheetMusicDisplay {
         if (options.defaultColorTitle) {
             EngravingRules.Rules.DefaultColorTitle = options.defaultColorTitle;
         }
+        if (options.defaultFontFamily) {
+            EngravingRules.Rules.DefaultFontFamily = options.defaultFontFamily; // default "Times New Roman", also used if font family not found
+        }
         if (options.drawUpToMeasureNumber) {
             EngravingRules.Rules.MaxMeasureToDrawIndex = options.drawUpToMeasureNumber - 1;
         }