handle font styles in the proxy

lib/single-file/font-face-proxy.js

@@ -14,11 +14,29 @@ this.fontFaceProxy = this.fontFaceProxy || (() => {
 	};
 
 	function hook() {
+		const FONT_STYLE_PROPERTIES = {
+			family: "font-family",
+			style: "font-style",
+			weight: "font-weight",
+			stretch: "font-stretch",
+			unicodeRange: "unicode-range",
+			variant: "font-variant",
+			featureSettings: "font-feature-settings"
+		};
+
 		Array.from(document.fonts).forEach(fontFace => document.fonts.delete(fontFace));
 		const FontFace = window.FontFace;
 		window.__defineGetter__("FontFace", () => new Proxy(FontFace, {
 			construct(FontFace, argumentsList) {
-				const detail = argumentsList;
+				const detail = {};
+				detail["font-family"] = argumentsList[0];
+				detail.src = argumentsList[1];
+				const descriptors = argumentsList[2];
+				if (descriptors) {
+					Object.keys(descriptors).forEach(descriptor => {
+						detail[FONT_STYLE_PROPERTIES[descriptor]] = descriptors[descriptor];
+					});
+				}
 				dispatchEvent(new CustomEvent("single-file-font-face", { detail }));
 				return new FontFace(...argumentsList);
 			}

lib/single-file/single-file-core.js

@@ -619,18 +619,17 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		insertFonts() {
 			if (this.options.fontsData && this.options.fontsData.length) {
 				let stylesheetContent = "";
-				this.options.fontsData.forEach(fontData => {
-					const [name, url, details] = fontData;
-					if (name && url) {
+				this.options.fontsData.forEach(fontStyles => {
+					if (fontStyles["font-family"] && fontStyles.src) {
 						stylesheetContent += "@font-face{";
-						let propertiesContent = "";
-						Object.keys(details).forEach(detail => {
-							propertiesContent += "font-" + detail + ":" + details[detail];
-							propertiesContent += ";";
+						let stylesContent = "";
+						Object.keys(fontStyles).forEach(fontStyle => {
+							if (stylesContent) {
+								stylesContent += ";";
+							}
+							stylesContent += fontStyle + ":" + fontStyles[fontStyle];
 						});
-						propertiesContent += "font-family:\"" + name + "\";";
-						propertiesContent += "src:" + url;
-						stylesheetContent += propertiesContent + "}";
+						stylesheetContent += stylesContent + "}";
 					}
 				});
 				const styleElement = this.doc.createElement("style");