diff --git a/global-styles/index.scss b/global-styles/index.scss
index 7fae82d52..64b92e14f 100644
--- a/global-styles/index.scss
+++ b/global-styles/index.scss
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-@import "variables";
+@import "variables.module";
 @import "variables.light";
 @import "bootstrap-vendor/bootstrap";
 @import '~react-bootstrap-typeahead/css/Typeahead';
diff --git a/global-styles/markdown-tweaks.scss b/global-styles/markdown-tweaks.scss
index 50572a941..226af2663 100644
--- a/global-styles/markdown-tweaks.scss
+++ b/global-styles/markdown-tweaks.scss
@@ -6,8 +6,11 @@
 
 .markdown-body {
   position: relative;
-  font-family: 'Source Sans Pro', "Twemoji", sans-serif;
   word-break: break-word;
+  & {
+    @import "./variables.module.scss";
+    font-family: $font-family-base;
+  }
 
   .svg-container {
     overflow-x: auto;
diff --git a/global-styles/variables.module.scss b/global-styles/variables.module.scss
new file mode 100644
index 000000000..8f6cc299f
--- /dev/null
+++ b/global-styles/variables.module.scss
@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+$font-family-emojis: "Apple Color Emoji", "Twemoji";
+$font-family-base: "Source Sans Pro", Helvetica, Arial, $font-family-emojis, sans-serif;
+
+:export {
+  font-family-emojis: $font-family-emojis;
+  font-family-base: $font-family-base;
+}
diff --git a/global-styles/variables.scss b/global-styles/variables.scss
deleted file mode 100644
index 1ba01b7d8..000000000
--- a/global-styles/variables.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-
-$font-family-base: "Source Sans Pro", Helvetica, Arial, "Twemoji", sans-serif;
diff --git a/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss b/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss
index 6c9f98f5f..ec37b3bf3 100644
--- a/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss
+++ b/src/components/editor-page/editor-pane/extended-codemirror/codemirror.module.scss
@@ -15,7 +15,10 @@
     @import './hints';
 
     .CodeMirror {
-      font-family: "Fira Code", "Twemoji", Consolas, monaco, monospace;
+      & {
+        @import '../../../../../global-styles/variables.module';
+        font-family: "Fira Code", $font-family-emojis, Consolas, monaco, monospace;
+      }
       letter-spacing: 0.025em;
       line-height: 1.25;
       font-size: 18px;
diff --git a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
index 6d2e93bdc..d39107164 100644
--- a/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
+++ b/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
@@ -12,6 +12,7 @@ import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-
 import styles from './emoji-picker.module.scss'
 import forkawesomeIcon from './forkawesome.png'
 import { ForkAwesomeIcons } from '../../../../common/fork-awesome/fork-awesome-icons'
+import fontStyles from '../../../../../../global-styles/variables.module.scss'
 
 export interface EmojiPickerProps {
   show: boolean
@@ -35,7 +36,7 @@ export const emojiPickerConfig = {
 
 const twemojiStyle = (): HTMLStyleElement => {
   const style = document.createElement('style')
-  style.textContent = 'section.picker { --font-family: "Twemoji" !important; }'
+  style.textContent = `section.picker { --font-family: ${fontStyles['font-family-emojis']} !important; }`
   return style
 }
 
diff --git a/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss b/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss
index cd780b36d..249e055f3 100644
--- a/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss
+++ b/src/components/markdown-renderer/markdown-extension/abcjs/abc.module.scss
@@ -6,8 +6,6 @@
 
 
 .abcjs-score {
-  @import "../../../../../global-styles/variables";
-
   :global(.markdown-body) & {
     overflow-x: auto !important;
   }
@@ -17,6 +15,7 @@
   }
 
   &, text {
+    @import "../../../../../global-styles/variables.module";
     font-family: $font-family-base;
   }
 }
diff --git a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
index 39722ad7d..554494e4e 100644
--- a/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
+++ b/src/components/markdown-renderer/markdown-extension/flowchart/flowchart.tsx
@@ -10,6 +10,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
 import { Logger } from '../../../../utils/logger'
 import { cypressId } from '../../../../utils/cypress-attribute'
+import fontStyles from '../../../../../global-styles/variables.module.scss'
 
 const log = new Logger('FlowChart')
 
@@ -40,7 +41,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
             'line-color': darkModeActivated ? '#ffffff' : '#000000',
             'element-color': darkModeActivated ? '#ffffff' : '#000000',
             'font-color': darkModeActivated ? '#ffffff' : '#000000',
-            'font-family': 'Source Sans Pro, "Twemoji", monospace'
+            'font-family': fontStyles['font-family-base']
           })
           setError(false)
         } catch (error) {