diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
index bfc87078e8af340832eea210fd19b04763fbdd3e..6f13ddb604d90988c6e3593cda3772838205fa75 100755
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
+++ b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIAttr/index.js
@@ -79,13 +79,14 @@ export default {
         var getFont2 = ctx.font; // 再次getter默认font
         console.info("getFont2=" + getFont2);
 
-        ctx.font = "  30px HYQiHei-65S two    three f "; // setter
+        ctx.font = "  30px SourceHanSansSC-Regular.otf two    three f "; // setter
         //ctx.font = "  "; // setter
 
         var getFont3 = ctx.font; // setter后getter font
         console.info("getFont3=" + getFont3);
 
-        ctx.fillText("Hello ACE", 10, 50);
+        ctx.fillText("Hello JS", 10, 20);
+        ctx.fillText("JS Hello", 10, 70);
     },
     textAlignFunc: function () {
         var canvasRef = this.$refs.canvas5;
@@ -97,7 +98,7 @@ export default {
         var getTextAlign2 = ctx.textAlign; // 再次getter默认text align
         console.info("getTextAlign2=" + getTextAlign2);
 
-        ctx.font = "30px HYQiHei-65S";
+        ctx.font = "30px SourceHanSansSC-Regular.otf";
         ctx.textAlign = "left"; // setter
         ctx.fillText("left", 110, 10);
         ctx.textAlign = "right"; // setter
diff --git a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
index 7fd486378d9a495f46252a413da434057b88e212..cd21434e611d202adae59301e4490616ad765696 100755
--- a/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
+++ b/examples/showcase/src/main/js/default/pages/component/canvas/indexAPIDraw/index.js
@@ -29,8 +29,8 @@ export default {
     fillTextFunc: function () {
         var canvasRef = this.$refs.canvas3;
         var ctx = canvasRef.getContext("2d");
-        ctx.font = "30px HYQiHei-65S";
-        ctx.fillText("Hello ACE", 10, 50);
+        ctx.font = "30px SourceHanSansSC-Regular.otf";
+        ctx.fillText("Hello JS", 10, 50);
     },
     arcFunc: function () {
         var canvasRef = this.$refs.canvas4;
diff --git a/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml b/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
index 5f807e67788627340d8b444baebbc6483544bde0..4951072e254877369ac00ddf4cd267273589789f 100755
--- a/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
+++ b/examples/showcase/src/main/js/default/pages/component/marquee/attr/attr.hml
@@ -33,7 +33,7 @@ limitations under the License.
             </div>
             <div class = "attribute-div-if-marquee">
                 <marquee if="{{ifstatus}}" style="width:200px;height:50px;">
-                    if 标签 if status, Hello ACE
+                    if 标签 if status, Hello JS
                 </marquee>
                 <marquee style="width:200px;height:50px;">
                     如果点击if按钮，会占用上面文字滚动区域
diff --git a/src/core/components/canvas_component.cpp b/src/core/components/canvas_component.cpp
index af6adbdd731feaeedb8e7b8a91d6ba2fafba37b6..3060e2c2aaf480a6ea1d824ae7aad5569c75fc14 100755
--- a/src/core/components/canvas_component.cpp
+++ b/src/core/components/canvas_component.cpp
@@ -25,8 +25,8 @@ namespace ACELite {
 const char * const CanvasComponent::DEFAULT_FILLSTYLE = "#000000";
 // default stroke style color=black
 const char * const CanvasComponent::DEFAULT_STROKESTYLE = "#000000";
-// default font size=30px, font family=HYQiHei-65S
-const char * const CanvasComponent::DEFAULT_FONT = "30px HYQiHei-65S";
+// default font size and font family
+const char * const CanvasComponent::DEFAULT_FONT = "30px " DEFAULT_VECTOR_FONT_FILENAME;
 // default text align=left
 const char * const CanvasComponent::DEFAULT_TEXTALIGN = "left";
 
@@ -114,6 +114,11 @@ void CanvasComponent::ReleaseNativeViews()
     ACE_FREE(strokeStyleValue_);
     ACE_FREE(fontValue_);
     ACE_FREE(textAlignValue_);
+    // free fontStyle_.fontName memory which malloc in FontSetter method.
+    if (fontStyle_.fontName != nullptr) {
+        ace_free(const_cast<char *>(fontStyle_.fontName));
+        fontStyle_.fontName = nullptr;
+    }
     if (!IS_UNDEFINED(canvas2dContext_)) {
         bool deleted = jerry_delete_object_native_pointer(canvas2dContext_, nullptr);
         if (!deleted) {
@@ -577,12 +582,6 @@ jerry_value_t CanvasComponent::CanvasFillText(const jerry_value_t func,
 
     component->canvas_->DrawLabel(startPoint, textValue, maxWidth, component->fontStyle_, component->paint_);
 
-    // free component->fontStyle_.fontName memory which malloc in FontSetter method.
-    if (component->fontStyle_.fontName != nullptr) {
-        ace_free(const_cast<char *>(component->fontStyle_.fontName));
-        component->fontStyle_.fontName = nullptr;
-    }
-
     ACE_FREE(textValue);
     return UNDEFINED;
 }