diff --git a/extension/fg/frontend.js b/extension/fg/frontend.js
index 6234528..248c355 100644
--- a/extension/fg/frontend.js
+++ b/extension/fg/frontend.js
@@ -98,22 +98,24 @@ function onHTMLMutation(mutationsList, cardCreator) {
 };
 
 function handleKeyDown(e, cardCreator) {
-    switch (e.key) {
-        case 'e':
-        case 'E':
-            if (e.ctrlKey || e.altKey || e.metaKey)
-                return;
-            const caption = document.querySelector('.caption.active');
-            if (!caption || !caption.getAttribute('data-caption-id'))
-                return;
-
-            const selectionRange = cardCreator.findSelectionRange(window.getSelection());
-            const start = (selectionRange && selectionRange.length > 0) ? selectionRange[0] : caption;
-            const id = start.getAttribute('data-caption-id');
-            cardCreator.addCard(id);
-            break;
-        default:
-            break;
+    if (document.activeElement !== document.getElementById("custom-style-box")) { // Check if custom style textarea is in focus
+        switch (e.key) {
+            case 'e':
+            case 'E':
+                if (e.ctrlKey || e.altKey || e.metaKey)
+                    return;
+                const caption = document.querySelector('.caption.active');
+                if (!caption || !caption.getAttribute('data-caption-id'))
+                    return;
+
+                const selectionRange = cardCreator.findSelectionRange(window.getSelection());
+                const start = (selectionRange && selectionRange.length > 0) ? selectionRange[0] : caption;
+                const id = start.getAttribute('data-caption-id');
+                cardCreator.addCard(id);
+                break;
+            default:
+                break;
+        }
     }
 }
 
diff --git a/index.html b/index.html
index 4baf4a4..1cbd155 100644
--- a/index.html
+++ b/index.html
@@ -862,8 +862,7 @@
                 default
               />
             </video>
-
-            <span class="current-caption" :style="'font-size: calc(' + (3.5 * savedSettings.subtitleFontSize) + 'vmin + 1.50rem);'" :key="shownCaptionsKey" lang="ja" v-html="displayedHtml"></span>
+              <span class="current-caption" :style="'font-size: calc(' + (3.5 * savedSettings.subtitleFontSize) + 'vmin + 1.50rem);' + savedSettings.subtitleStyling" :key="shownCaptionsKey" lang="ja" v-html="displayedHtml"></span>
           </div>
           <span id="ab-meta-data" style="display: none;" :data-audio-track="selectedAudioTrack || 0"></span>
           <div id="resize-bar-wrapper" class="resize-bar-wrapper" lang="ja">
@@ -952,6 +951,15 @@ <h3 style="margin-bottom: 0.1rem;">Subtitle font size</h3>
                 <input style="width: 30%;" type="range" min="0.1" max="3.0" step="0.1" id="subtitle-font-size" v-model.number="savedSettings.subtitleFontSize">
                 <label for="subtitle-font-size">{{(this.savedSettings.subtitleFontSize * 100).toFixed(0)}}%</label>
               </p>
+              <p>
+                <h3 style="margin-bottom: 0.1rem;">Subtitle styling</h3>
+                <div style="margin-left: 1rem;">
+                  <p>
+                    Apply custom inline styles to the subtitles, such as fonts.
+                  </p>
+                  <textarea name="" id="custom-style-box" spellcheck="false" v-model="savedSettings.subtitleStyling" placeholder="e.g. font-family: Arial;" style="height: 100px; width: 100%; resize: none;"></textarea>
+                </div>
+              </p>
               <p>
                 <h3 style="margin-bottom: 0.1rem;">Hide text matching regex</h4>
                 <div style="margin-left: 1rem;">
@@ -1246,6 +1254,7 @@ <h3>Usage</h3>
             videoAlignment: 'top',
             showVideoControls: true,
             subtitleFontSize: 1.0,
+            subtitleStyling: '',
             regexReplacements: [
               { regex: '\\(\\(.*?\\)\\)', replaceText: ''},
               { regex: '\\(.*?\\)', replaceText: ''},