diff --git a/src/graphing/components/quadrants.js b/src/graphing/components/quadrants.js
index 8a6540014..100014cac 100644
--- a/src/graphing/components/quadrants.js
+++ b/src/graphing/components/quadrants.js
@@ -19,24 +19,6 @@ let prevLeft, prevTop
 let quadrantScrollHandlerReference
 let scrollFlag = false
 
-const createElement = (tagName, text, attributes) => {
-  const tag = document.createElement(tagName)
-  Object.keys(attributes).forEach((keyName) => {
-    tag.setAttribute(keyName, attributes[keyName])
-  })
-  tag.appendChild(document.createTextNode(text))
-  return tag
-}
-
-const replaceChild = (element, child) => {
-  let elementChild = element.lastElementChild
-  while (elementChild) {
-    element.removeChild(elementChild)
-    elementChild = element.lastElementChild
-  }
-  element.appendChild(child)
-}
-
 function selectRadarQuadrant(order, startAngle, name) {
   const noOfBlips = d3.selectAll('.quadrant-group-' + order + ' .blip-link').size()
   d3.select('#radar').classed('no-blips', noOfBlips === 0)
@@ -217,19 +199,19 @@ function wrapQuadrantNameInMultiLine(elem, isTopQuadrants, quadrantNameGroup, ti
   const words = text.split(' ')
   let line = ''
 
-  replaceChild(element, createElement('tspan', text, { id: 'text-width-check' }))
+  element.innerHTML = `<tspan id="text-width-check">${text}</tspan >`
   const testElem = document.getElementById('text-width-check')
 
   function maxCharactersToFit(testLine, suffix) {
     let j = 1
     let firstLineWidth = 0
     const testElem1 = document.getElementById('text-width-check')
-    testElem1.textContent = testLine
+    testElem1.innerHTML = testLine
     if (testElem1.getBoundingClientRect().width < maxWidth) {
       return testLine.length
     }
     while (firstLineWidth < maxWidth && testLine.length > j) {
-      testElem1.textContent = testLine.substring(0, j) + suffix
+      testElem1.innerHTML = testLine.substring(0, j) + suffix
       firstLineWidth = testElem1.getBoundingClientRect().width
 
       j++
@@ -250,25 +232,34 @@ function wrapQuadrantNameInMultiLine(elem, isTopQuadrants, quadrantNameGroup, ti
   if (testElem.getBoundingClientRect().width > maxWidth) {
     for (let i = 0; i < words.length; i++) {
       let testLine = line + words[i] + ' '
-      testElem.textContent = testLine
+      testElem.innerHTML = testLine
       const textWidth = testElem.getBoundingClientRect().width
 
       if (textWidth > maxWidth) {
         if (i === 0) {
           let lineBreakIndex = maxCharactersToFit(testLine, '-')
-          const elementText = `${words[i].substring(0, lineBreakIndex)}-`
-          element.appendChild(createElement('tspan', elementText, { x: '0', dy }))
+          element.innerHTML += '<tspan x="0" dy="' + dy + '">' + words[i].substring(0, lineBreakIndex) + '-</tspan>'
           const secondLine = words[i].substring(lineBreakIndex, words[i].length) + ' ' + words.slice(i + 1).join(' ')
           lineBreakIndex = maxCharactersToFit(secondLine, '...')
-          const text = `${secondLine.substring(0, lineBreakIndex)}${ellipsis(lineBreakIndex, secondLine)}`
-          element.appendChild(createElement('tspan', text, { x: '0', dy: '20' }))
+          element.innerHTML +=
+            '<tspan x="0" dy="' +
+            20 +
+            '">' +
+            secondLine.substring(0, lineBreakIndex) +
+            ellipsis(lineBreakIndex, secondLine) +
+            '</tspan>'
           break
         } else {
-          element.appendChild(createElement('tspan', line, { x: '0', dy }))
+          element.innerHTML += '<tspan x="0" dy="' + dy + '">' + line + '</tspan>'
           const secondLine = words.slice(i).join(' ')
           const lineBreakIndex = maxCharactersToFit(secondLine, '...')
-          const text = `${secondLine.substring(0, lineBreakIndex)}${ellipsis(lineBreakIndex, secondLine)}`
-          element.appendChild(createElement('tspan', text, { x: '0', dy: '20' }))
+          element.innerHTML +=
+            '<tspan x="0" dy="' +
+            20 +
+            '">' +
+            secondLine.substring(0, lineBreakIndex) +
+            ellipsis(lineBreakIndex, secondLine) +
+            '</tspan>'
         }
         line = words[i] + ' '
       } else {
@@ -276,7 +267,7 @@ function wrapQuadrantNameInMultiLine(elem, isTopQuadrants, quadrantNameGroup, ti
       }
     }
   } else {
-    element.appendChild(createElement('tspan', text, { x: '0' }))
+    element.innerHTML += '<tspan x="0">' + text + '</tspan>'
   }
 
   document.getElementById('text-width-check').remove()
diff --git a/src/index.html b/src/index.html
index 73bb372d3..472da3323 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/images/favicon.ico" rel="icon" />
     <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" integrity="sha512-byor" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" integrity="sha512-byor" crossorigin="anonymous" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@700&display=swap" rel="stylesheet" />