diff --git a/packages/components/src/Draft/Text/index.js b/packages/components/src/Draft/Text/index.js
index b274b5a3d0c..c99cae7e004 100644
--- a/packages/components/src/Draft/Text/index.js
+++ b/packages/components/src/Draft/Text/index.js
@@ -15,7 +15,7 @@ const Text = (props) => {
   if (translated.indexOf('\n') !== -1) {
     let key = 0
     let lines = translated.split('\n')
-    text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
+    text.push(<tspan key={'tspan-' + key} dangerouslySetInnerHTML={{ __html: lines.shift()}} />)
     let lineHeight = (props.point.attributes.get('data-text-lineheight') || 12) * (props.scale || 1)
     for (let line of lines) {
       key++
@@ -24,12 +24,11 @@ const Text = (props) => {
           key={'tspan-' + key}
           x={props.point.x}
           dy={lineHeight}
-        >
-          {line.toString().replace(/&quot;/g, '"')}
-        </tspan>
+          dangerouslySetInnerHTML={{ __html: line.toString().replace(/&quot;/g, '"')}}
+        />
       )
     }
-  } else text.push(<tspan key="tspan-1">{translated}</tspan>)
+  } else text.push(<tspan key="tspan-1" dangerouslySetInnerHTML={{ __html: translated}} />)
 
   return (
     <text
diff --git a/packages/components/src/Draft/TextOnPath/index.js b/packages/components/src/Draft/TextOnPath/index.js
index 1ca8cf13c85..bb7549b4028 100644
--- a/packages/components/src/Draft/TextOnPath/index.js
+++ b/packages/components/src/Draft/TextOnPath/index.js
@@ -19,10 +19,18 @@ const TextOnPath = (props) => {
   if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
   else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'
 
+  /*
+   * We need dangerouslySetInnerHTML here to make sure we have a way to
+   * add whitespace that works both in the browser as in SVG.
+   * Whitespace = &#160;
+   */
   return (
     <text>
       <textPath {...textPathProps}>
-        <tspan {...props.path.attributes.asPropsIfPrefixIs('data-text-')}>{translated}</tspan>
+        <tspan
+          {...props.path.attributes.asPropsIfPrefixIs('data-text-')}
+          dangerouslySetInnerHTML={{ __html: translated }}
+        />
       </textPath>
     </text>
   )