diff --git a/package.json b/package.json
index eb2f500aa..67c866ceb 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
         "@types/uuid": "8.3.0",
         "@typescript-eslint/eslint-plugin": "4.14.0",
         "@typescript-eslint/parser": "4.14.0",
-        "abcjs": "5.12.0",
+        "abcjs": "6.0.0-beta.26",
         "bootstrap": "4.6.0",
         "browserstack-cypress-cli": "1.6.0",
         "codemirror": "5.59.2",
diff --git a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
index 3a2198773..013170efb 100644
--- a/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
+++ b/src/components/markdown-renderer/replace-components/abc/abc-frame.tsx
@@ -1,10 +1,11 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useRef } from 'react'
+import './abc.scss'
 
 export interface AbcFrameProps {
   code: string
@@ -23,5 +24,5 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
     }).catch(() => { console.error('error while loading abcjs') })
   }, [code])
 
-  return <div ref={container} className={'bg-white text-center overflow-x-auto'}/>
+  return <div ref={container} className={'abcjs-score bg-white text-center overflow-x-auto'}/>
 }
diff --git a/src/components/markdown-renderer/replace-components/abc/abc.scss b/src/components/markdown-renderer/replace-components/abc/abc.scss
new file mode 100644
index 000000000..0566e7cf6
--- /dev/null
+++ b/src/components/markdown-renderer/replace-components/abc/abc.scss
@@ -0,0 +1,13 @@
+/*!
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.abcjs-score {
+  @import "../../../../style/variables.scss";
+
+  &, text {
+    font-family: $font-family-base;
+  }
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index b2a8e15f0..8c88a72c6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,9 +1,10 @@
-/*
+/*!
  * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+@import "variables";
 @import "variables.light";
 @import "../../node_modules/bootstrap/scss/bootstrap";
 @import '../../node_modules/react-bootstrap-typeahead/css/Typeahead';
@@ -25,7 +26,6 @@ html {
 
 body {
   min-height: 100%;
-  font-family: "Source Sans Pro", Helvetica, Arial, "Twemoji Mozilla", sans-serif;
 }
 
 *:focus {
diff --git a/src/style/variables.scss b/src/style/variables.scss
new file mode 100644
index 000000000..16c3c7be7
--- /dev/null
+++ b/src/style/variables.scss
@@ -0,0 +1,8 @@
+/*!
+ * 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 Mozilla", sans-serif;
diff --git a/yarn.lock b/yarn.lock
index 54b1c3433..6a9fa92dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2876,28 +2876,10 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-abcjs@5.10.3:
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/abcjs/-/abcjs-5.10.3.tgz#294702140ec1caa292859ba9d2af0452f7e9e046"
-  integrity sha512-YGmW4CUWd7T2/HqZa/SQOTE+lXg7Z68HwwpJhHJBvdHqLi1uLCiYva1ZRGhB/MPyl1QKqJMfF+LQ1jGAEK69XQ==
-  dependencies:
-    midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs"
-
-abcjs@5.11.0:
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/abcjs/-/abcjs-5.11.0.tgz#397592ea6a56948aee64a8364f9a7a589e254300"
-  integrity sha512-kLehHwwttcTCVhKQaDkmqYbWBLAWmfyzYSbUQoEDAOTOX5RzDGakX8tXpzlsNHw6Lh8W8odZw44e0siwbG4TKA==
-  dependencies:
-    abcjs "5.10.3"
-    midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs"
-
-abcjs@5.12.0:
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/abcjs/-/abcjs-5.12.0.tgz#06fec076d570821309b0a12598cd356cd589eb08"
-  integrity sha512-pvi7SjOAKT7cRyRtywUSwYB0SNtRHKLxZUZ9Oc4E+nvpBHr8Z2/M9Pfyv3oIaiEpxlWTFK+B/H5t/DckiNFgpg==
-  dependencies:
-    abcjs "5.11.0"
-    midi "git+https://github.com/paulrosen/MIDI.js.git#abcjs"
+abcjs@6.0.0-beta.26:
+  version "6.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/abcjs/-/abcjs-6.0.0-beta.26.tgz#4eb42feb99a896241bd275da967220218ffd4755"
+  integrity sha512-9doroZ9LX+VqHgLJs+ocLslIeJeYIL809voz0yGUBuzB9jTgvwwGNh5Xmn0qT+MV090KQ9bao5MAp53mDScXJQ==
 
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
@@ -9803,11 +9785,6 @@ micromatch@^4.0.0, micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-"midi@git+https://github.com/paulrosen/MIDI.js.git#abcjs":
-  version "0.4.2"
-  uid e593ffef81a0350f99448e3ab8111957145ff6b2
-  resolved "git+https://github.com/paulrosen/MIDI.js.git#e593ffef81a0350f99448e3ab8111957145ff6b2"
-
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"