diff --git a/src/components/editor/editor-pane/editor-pane.scss b/src/components/editor/editor-pane/editor-pane.scss
index bf23059dc..a90d7cc2b 100644
--- a/src/components/editor/editor-pane/editor-pane.scss
+++ b/src/components/editor/editor-pane/editor-pane.scss
@@ -7,7 +7,7 @@
 @import 'hints';
 
 .CodeMirror {
-  font-family: "Source Code Pro", "twemoji", Consolas, monaco, monospace;
+  font-family: "Source Code Pro", "Twemoji Mozilla", Consolas, monaco, monospace;
   letter-spacing: 0.025em;
   line-height: 1.25;
   font-size: 18px;
diff --git a/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
index 3b981083f..dc5d17918 100644
--- a/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
+++ b/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
@@ -36,7 +36,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected,
 
   const twemojiStyle = useMemo(() => {
     const style = document.createElement('style')
-    style.textContent = 'section.picker { --font-family: "twemoji" !important; }'
+    style.textContent = 'section.picker { --font-family: "Twemoji Mozilla" !important; }'
     return style
   }, [])
 
diff --git a/src/components/markdown-renderer/markdown-renderer.scss b/src/components/markdown-renderer/markdown-renderer.scss
index b32c7796a..adfa75f97 100644
--- a/src/components/markdown-renderer/markdown-renderer.scss
+++ b/src/components/markdown-renderer/markdown-renderer.scss
@@ -2,7 +2,7 @@
 
 .markdown-body {
   position: relative;
-  font-family: 'Source Sans Pro', "twemoji", sans-serif;
+  font-family: 'Source Sans Pro', "Twemoji Mozilla", sans-serif;
   word-break: break-word;
 
   .alert > p, .alert > ul {
diff --git a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
index 39db90aa0..2ddf32cd4 100644
--- a/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
+++ b/src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx
@@ -24,7 +24,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
           'line-width': 2,
           fill: 'none',
           'font-size': '16px',
-          'font-family': 'Source Code Pro, twemoji, monospace'
+          'font-family': 'Source Code Pro, "Twemoji Mozilla", monospace'
         })
         setError(false)
       } catch (error) {
diff --git a/src/style/fonts/twemoji/TwemojiMozilla.ttf b/src/style/fonts/twemoji/TwemojiMozilla.ttf
index 6091c6798..0ef932687 100644
Binary files a/src/style/fonts/twemoji/TwemojiMozilla.ttf and b/src/style/fonts/twemoji/TwemojiMozilla.ttf differ
diff --git a/src/style/fonts/twemoji/twemoji.scss b/src/style/fonts/twemoji/twemoji.scss
index 8811427cc..b62ad4f8a 100644
--- a/src/style/fonts/twemoji/twemoji.scss
+++ b/src/style/fonts/twemoji/twemoji.scss
@@ -1,4 +1,4 @@
 @font-face {
-  font-family: "twemoji";
+  font-family: "Twemoji Mozilla";
   src: url("TwemojiMozilla.ttf") format("truetype");
 }
diff --git a/src/style/index.scss b/src/style/index.scss
index f8a33c0ba..4f6ceb39e 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -19,7 +19,7 @@ html {
 
 body {
   min-height: 100%;
-  font-family: "Source Sans Pro", Helvetica, Arial, twemoji, sans-serif;
+  font-family: "Source Sans Pro", Helvetica, Arial, "Twemoji Mozilla", sans-serif;
 }
 
 *:focus {