diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index dbb3c285..0e77ccca 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -96,7 +96,7 @@ export default function QSelectBox({
       title={tagTitle}
     >
       <p>{selected}</p>
-      <ul className="select-item-wrap">
+      <ul className="select-item-wrap" style={{ maxHeight: '200px' }}>
         {options?.length > 0 &&
           options?.map((option, index) => (
             <li key={option.id + '_' + index} className="select-item" onClick={() => handleClickSelectOption(option)}>
diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js
index 9498b036..3db63427 100644
--- a/src/hooks/common/useFont.js
+++ b/src/hooks/common/useFont.js
@@ -12,6 +12,7 @@ export function useFont() {
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   useEffect(() => {
+    setTimeout(() => {
     if (canvas && commonText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
       textObjs.forEach((obj) => {
@@ -24,71 +25,81 @@ export function useFont() {
         })
       })
       canvas.renderAll()
-    }
+    }}, 200)
   }, [commonText])
 
   useEffect(() => {
-    if (canvas && dimensionLineText.fontWeight.value) {
-      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
-      textObjs.forEach((obj) => {
-        obj.set({
-          fontFamily: dimensionLineText.fontFamily.value,
-          fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontSize: dimensionLineText.fontSize.value,
-          fill: dimensionLineText.fontColor.value,
+    setTimeout(() => {
+      if (canvas && dimensionLineText.fontWeight.value) {
+        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
+        textObjs.forEach((obj) => {
+          obj.set({
+            fontFamily: dimensionLineText.fontFamily.value,
+            fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+            fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontSize: dimensionLineText.fontSize.value,
+            fill: dimensionLineText.fontColor.value,
+          })
         })
-      })
-      canvas.renderAll()
-    }
+        canvas.renderAll()
+      }
+    }, 200)
+
   }, [dimensionLineText])
 
   useEffect(() => {
-    if (canvas && flowText.fontWeight.value) {
-      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
-      textObjs.forEach((obj) => {
-        obj.set({
-          fontFamily: flowText.fontFamily.value,
-          fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontSize: flowText.fontSize.value,
-          fill: flowText.fontColor.value,
+    setTimeout(() => {
+      if (canvas && flowText.fontWeight.value) {
+        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
+        textObjs.forEach((obj) => {
+          obj.set({
+            fontFamily: flowText.fontFamily.value,
+            fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+            fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontSize: flowText.fontSize.value,
+            fill: flowText.fontColor.value,
+          })
         })
-      })
-      canvas.renderAll()
-    }
+        canvas.renderAll()
+      }
+    }, 200)
+
   }, [flowText])
 
   useEffect(() => {
-    if (canvas && lengthText.fontWeight.value) {
-      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
-      textObjs.forEach((obj) => {
-        obj.set({
-          fontFamily: lengthText.fontFamily.value,
-          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontSize: lengthText.fontSize.value,
-          fill: lengthText.fontColor.value,
+    setTimeout(() => {
+      if (canvas && lengthText.fontWeight.value) {
+        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
+        textObjs.forEach((obj) => {
+          obj.set({
+            fontFamily: lengthText.fontFamily.value,
+            fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+            fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontSize: lengthText.fontSize.value,
+            fill: lengthText.fontColor.value,
+          })
         })
-      })
-      canvas.renderAll()
-    }
+        canvas.renderAll()
+      }
+    }, 200)
   }, [lengthText])
 
   useEffect(() => {
-    if (canvas && circuitNumberText.fontWeight.value) {
-      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
-      textObjs.forEach((obj) => {
-        obj.set({
-          fontFamily: circuitNumberText.fontFamily.value,
-          fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontSize: circuitNumberText.fontSize.value,
-          fill: circuitNumberText.fontColor.value,
+    setTimeout(() => {
+      if (canvas && circuitNumberText.fontWeight.value) {
+        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
+        textObjs.forEach((obj) => {
+          obj.set({
+            fontFamily: circuitNumberText.fontFamily.value,
+            fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+            fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontSize: circuitNumberText.fontSize.value,
+            fill: circuitNumberText.fontColor.value,
+          })
         })
-      })
-      canvas.renderAll()
-    }
+        canvas.renderAll()
+      }
+    }, 200)
   }, [circuitNumberText])
 
   return {}
diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js
index 58f87e7d..66dff769 100644
--- a/src/hooks/useLine.js
+++ b/src/hooks/useLine.js
@@ -13,6 +13,7 @@ import { basicSettingState } from '@/store/settingAtom'
 import { calcLineActualSize } from '@/util/qpolygon-utils'
 import { getDegreeByChon } from '@/util/canvas-util'
 import { useText } from '@/hooks/useText'
+import { fontSelector } from '@/store/fontAtom'
 
 export const useLine = () => {
   const canvas = useRecoilValue(canvasState)
@@ -23,14 +24,15 @@ export const useLine = () => {
   const angleUnit = useRecoilValue(showAngleUnitSelector)
   const roofSizeSet = useRecoilValue(basicSettingState).roofSizeSet
   const globalPitch = useRecoilValue(globalPitchState)
+  const lengthText = useRecoilValue(fontSelector('lengthText'))
 
   const { changeCorridorDimensionText } = useText()
 
   const addLine = (points = [], options) => {
     const line = new QLine(points, {
       ...options,
-      fontSize: fontSize,
-      fontFamily: fontFamily,
+      fontSize: lengthText.fontSize.value,
+      fontFamily: lengthText.fontFamily.value,
     })
 
     if (line.length < 1) {