Use Font Loading API instead of FontDetect

public/assets/fonts/fonts.css

@@ -1,8 +0,0 @@
-@font-face{
-	font-family: TnT;
-	src: url("TnT.ttf") format("truetype");
-}
-@font-face{
-	font-family: Kozuka;
-	src: url("Kozuka.otf") format("truetype");
-}

public/src/js/assets.js

@@ -1,6 +1,5 @@
 var assets = {
 	"js": [
-		"lib/fontdetect.min.js",
 		"lib/md5.min.js",
 		"loadsong.js",
 		"parseosu.js",
@@ -44,7 +43,6 @@ var assets = {
 		"view.css"
 	],
 	"assetsCss": [
-		"fonts/fonts.css",
 		"img/img.css"
 	],
 	"img": [
@@ -126,10 +124,10 @@ var assets = {
 		"bgm_setsume.mp3",
 		"bgm_settings.mp3"
 	],
-	"fonts": [
+	"fonts": {
-		"Kozuka",
+		"Kozuka": "Kozuka.otf",
-		"TnT"
+		"TnT": "TnT.ttf"
-	],
+	},
 	"views": [
 		"game.html",
 		"loadsong.html",

public/src/js/browsersupport.js

@@ -47,6 +47,9 @@ function browserSupport(){
 			var el = document.createElement("a")
 			el.style.setProperty("--a", 1)
 			return el.style.length !== 0
+		},
+		"Font Loading API": function(){
+			return typeof FontFace === "function"
 		}
 	}
 	failedTests = []

public/src/js/lib/fontdetect.min.js

@@ -1 +0,0 @@
-FontDetect=function(){function e(){if(!n){n=!0;var e=document.body,t=document.body.firstChild,i=document.createElement("div");i.id="fontdetectHelper",r=document.createElement("span"),r.innerText="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",i.appendChild(r),e.insertBefore(i,t),i.style.position="absolute",i.style.visibility="hidden",i.style.top="-200px",i.style.left="-100000px",i.style.width="100000px",i.style.height="200px",i.style.fontSize="100px"}}function t(e,t){return e instanceof Element?window.getComputedStyle(e).getPropertyValue(t):window.jQuery?$(e).css(t):""}var n=!1,i=["serif","sans-serif","monospace","cursive","fantasy"],r=null;return{onFontLoaded:function(t,i,r,o){if(t){var s=o&&o.msInterval?o.msInterval:100,a=o&&o.msTimeout?o.msTimeout:2e3;if(i||r){if(n||e(),this.isFontLoaded(t))return void(i&&i(t));var l=this,f=(new Date).getTime(),d=setInterval(function(){if(l.isFontLoaded(t))return clearInterval(d),void i(t);var e=(new Date).getTime();e-f>a&&(clearInterval(d),r&&r(t))},s)}}},isFontLoaded:function(t){var o=0,s=0;n||e();for(var a=0;a<i.length;++a){if(r.style.fontFamily='"'+t+'",'+i[a],o=r.offsetWidth,a>0&&o!=s)return!1;s=o}return!0},whichFont:function(e){for(var n=t(e,"font-family"),r=n.split(","),o=r.shift();o;){o=o.replace(/^\s*['"]?\s*([^'"]*)\s*['"]?\s*$/,"$1");for(var s=0;s<i.length;s++)if(o==i[s])return o;if(this.isFontLoaded(o))return o;o=r.shift()}return null}}}();

public/src/js/loader.js

@@ -71,12 +71,11 @@ class Loader{
 			checkStyles()
 		}))
 		
-		assets.fonts.forEach(name => {
+		for(var name in assets.fonts){
-			var font = document.createElement("h1")
+			this.addPromise(new FontFace(name, "url('" + gameConfig.assets_baseurl + "fonts/" + assets.fonts[name] + "')").load().then(font => {
-			font.style.fontFamily = name
+				document.fonts.add(font)
-			font.appendChild(document.createTextNode("I am a font"))
+			}))
-			this.assetsDiv.appendChild(font)
+		}
-		})
 		
 		assets.img.forEach(name => {
 			var id = this.getFilename(name)
@@ -106,7 +105,6 @@ class Loader{
 		
 		this.afterJSCount =
 			["blurPerformance", "P2Connection"].length +
-			assets.fonts.length +
 			assets.audioSfx.length +
 			assets.audioMusic.length +
 			assets.audioSfxLR.length +
@@ -131,12 +129,6 @@ class Loader{
 			
 			this.afterJSCount = 0
 			
-			assets.fonts.forEach(name => {
-				this.addPromise(new Promise(resolve => {
-					FontDetect.onFontLoaded(name, resolve, resolve, {msTimeout: Infinity})
-				}))
-			})
-			
 			assets.audioSfx.forEach(name => {
 				this.addPromise(this.loadSound(name, snd.sfxGain))
 			})