diff --git a/app/css/master.css b/app/css/master.css
index baa93f81..05380470 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -720,3 +720,12 @@ button {
 	position: relative;
 	top: -4px;
 }
+#fonts {
+	overflow-y: scroll;
+    width: 22rem;
+    height: 40rem;
+    position: absolute;
+    background-color: var(--bg);
+    z-index: 2;
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/app/js/ui/settings.js b/app/js/ui/settings.js
index 12ddd635..96d386ef 100644
--- a/app/js/ui/settings.js
+++ b/app/js/ui/settings.js
@@ -507,7 +507,12 @@ function savefolder() {
 }
 
 function font() {
-	postMessage(['sendSinmpleIpc', 'fonts'], '*')
+	if($('#fonts').hasClass('hide')) {
+		postMessage(['sendSinmpleIpc', 'fonts'], '*')
+		$('#fonts').removeClass('hide')
+	} else {
+		$('#fonts').addClass('hide')
+	}
 }
 function fontList(arg) {
 	$('#fonts').removeClass('hide')
@@ -517,6 +522,7 @@ function fontList(arg) {
 	}
 }
 function insertFont(name) {
+	$('#fonts').addClass('hide')
 	$('#font').val(name)
 }
 function copyColor(from, to) {
diff --git a/app/view/make/setting.sample.html b/app/view/make/setting.sample.html
index a23e0fc5..64ea3ad9 100644
--- a/app/view/make/setting.sample.html
+++ b/app/view/make/setting.sample.html
@@ -103,12 +103,10 @@
 				</div>
 				<h5>@@font@@</h5>
 				@@fontwarn@@<br>
-				<button class="btn waves-effect" style="width:7.7rem;" onclick="font()">@@select@@</button><br>
-				<div id="fonts" class="hide" style="overflow-y:scroll; width:22rem; height:40rem;"></div>
-				<br>
+				<button class="btn waves-effect orange darken-2" style="width:7.7rem;" onclick="font()">@@select@@</button>
 				<input type="text" style="width:11.5rem" id="font">
 				<button class="btn waves-effect" style="width:7.7rem;" onclick="settings()">@@set@@</button>
-				<br>
+				<div id="fonts" class="hide"></div>
 				<h5>@@savefolder@@</h5>
 				@@savefolderwarn@@<br>
 				<button class="btn waves-effect" style="width:7.7rem;" onclick="savefolder()">@@change@@</button>