diff --git a/app/javascript/packs/tiny_mce.js b/app/javascript/packs/tiny_mce.js
index 9b076eada..60c7da274 100644
--- a/app/javascript/packs/tiny_mce.js
+++ b/app/javascript/packs/tiny_mce.js
@@ -124,7 +124,7 @@ window.TinyMCE = (() => {
     setTimeout(() => { tinyMCE.activeEditor.execCommand('mceAutoResize') }, 500);
   }
 
-  function initImageToolBar(editor) {
+  function initCssOverrides(editor) {
     const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
     const primaryColor = '#104da9';
     editorIframe.contents().find('head').append(`<style type="text/css">
@@ -141,6 +141,7 @@ window.TinyMCE = (() => {
         h2 {font-size: 18px !important }
         h3 {font-size: 16px !important }
       </style>`);
+    editorIframe.contents().find('head').append($('#font-css-pack').clone());
   }
 
   function draftLocation() {
@@ -316,7 +317,7 @@ window.TinyMCE = (() => {
             }
 
             // Init image toolbar
-            initImageToolBar(editor);
+            initCssOverrides(editor);
 
             // Init save/cancel button wrapper
             $('<div class="tinymce-save-controls"></div>').appendTo(menuBar);
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 32aee7bbf..8be92dc9b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -27,7 +27,7 @@
     <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
     <%= favicon_link_tag "favicon-32.png", type: "image/png", size: "32x32" %>
     <%= favicon_link_tag "favicon-48.png", type: "image/png", size: "48x48" %>
-    <%= stylesheet_pack_tag 'fonts' %>
+    <%= stylesheet_pack_tag 'fonts', id: 'font-css-pack' %>
     <%= stylesheet_pack_tag 'fontawesome' %>
 
     <%= csrf_meta_tags %>