diff --git a/packages/client/builtin/Monaco.vue b/packages/client/builtin/Monaco.vue
index 46889a4036..6233be5de9 100644
--- a/packages/client/builtin/Monaco.vue
+++ b/packages/client/builtin/Monaco.vue
@@ -140,6 +140,7 @@ onMounted(async () => {
         : /* BELOW */ `` // reset
     }
   }
+  nextTick(() => monaco.editor.remeasureFonts())
 })
 </script>
 
@@ -148,3 +149,33 @@ onMounted(async () => {
     <div ref="container" class="absolute inset-0.5" />
   </div>
 </template>
+
+<style>
+div[widgetid='messageoverlay'] {
+  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
+}
+
+.slidev-monaco-container {
+  position: relative;
+  margin: var(--slidev-code-margin);
+  padding: var(--slidev-code-padding);
+  line-height: var(--slidev-code-line-height);
+  border-radius: var(--slidev-code-radius);
+  background: var(--slidev-code-background);
+}
+
+.slidev-monaco-container .monaco-editor {
+  --monaco-monospace-font: var(--slidev-code-font-family);
+  --vscode-editor-background: var(--slidev-code-background);
+  --vscode-editorGutter-background: var(--slidev-code-background);
+}
+
+/** Revert styles */
+.slidev-monaco-container .monaco-editor a {
+  border-bottom: none;
+}
+
+.slidev-monaco-container .monaco-editor a:hover {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/client/styles/monaco.css b/packages/client/styles/monaco.css
deleted file mode 100644
index 551cd7563f..0000000000
--- a/packages/client/styles/monaco.css
+++ /dev/null
@@ -1,27 +0,0 @@
-div[widgetid='messageoverlay'] {
-  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
-}
-
-.slidev-monaco-container {
-  position: relative;
-  margin: var(--slidev-code-margin);
-  padding: var(--slidev-code-padding);
-  line-height: var(--slidev-code-line-height);
-  border-radius: var(--slidev-code-radius);
-  background: var(--slidev-code-background);
-}
-
-.slidev-monaco-container .monaco-editor {
-  --monaco-monospace-font: var(--slidev-code-font-family);
-  --vscode-editor-background: var(--slidev-code-background);
-  --vscode-editorGutter-background: var(--slidev-code-background);
-}
-
-/** Revert styles */
-.slidev-monaco-container .monaco-editor a {
-  border-bottom: none;
-}
-
-.slidev-monaco-container .monaco-editor a:hover {
-  border-bottom: none;
-}
diff --git a/packages/slidev/node/plugins/loaders.ts b/packages/slidev/node/plugins/loaders.ts
index 5a900d294c..b98b8c70f3 100644
--- a/packages/slidev/node/plugins/loaders.ts
+++ b/packages/slidev/node/plugins/loaders.ts
@@ -603,7 +603,6 @@ defineProps<{ no: number | string }>()`)
       `import "${resolveUrlOfClient('styles/code.css')}"`,
       `import "${resolveUrlOfClient('styles/katex.css')}"`,
       `import "${resolveUrlOfClient('styles/transitions.css')}"`,
-      `import "${resolveUrlOfClient('styles/monaco.css')}"`,
     ]
 
     for (const root of roots) {