diff --git a/lib/text/srt_text_parser.js b/lib/text/srt_text_parser.js
index b2a3d73125..89a70a4444 100644
--- a/lib/text/srt_text_parser.js
+++ b/lib/text/srt_text_parser.js
@@ -110,7 +110,15 @@ shaka.text.SrtTextParser = class {
     // convert time codes
     lines[0] = lines[0].replace(/,/g, '.');
 
-    return lines.join('\n') + '\n\n';
+    const webvttCue = lines.join('\n')
+        .replace(/{b}/g, '<b>')
+        .replace(/{\/b}/g, '</b>')
+        .replace(/{i}/g, '<i>')
+        .replace(/{\/i}/g, '</i>')
+        .replace(/{u}/g, '<u>')
+        .replace(/{\/u}/g, '</u>');
+
+    return webvttCue + '\n\n';
   }
 };
 
diff --git a/lib/text/vtt_text_parser.js b/lib/text/vtt_text_parser.js
index 6271c95ad0..863be3853c 100644
--- a/lib/text/vtt_text_parser.js
+++ b/lib/text/vtt_text_parser.js
@@ -722,6 +722,14 @@ shaka.text.VttTextParser = class {
           case 'u':
             nestedCue.textDecoration.push(underline);
             break;
+          case 'font': {
+            const color =
+            /** @type {!Element} */(element).getAttribute('color');
+            if (color) {
+              nestedCue.color = color;
+            }
+            break;
+          }
           case 'div': {
             const time = /** @type {!Element} */(element).getAttribute('time');
             if (!time) {
diff --git a/test/text/srt_text_parser_unit.js b/test/text/srt_text_parser_unit.js
index fba00e8b5f..beee706cef 100644
--- a/test/text/srt_text_parser_unit.js
+++ b/test/text/srt_text_parser_unit.js
@@ -5,6 +5,8 @@
  */
 
 describe('SrtTextParser', () => {
+  const Cue = shaka.text.Cue;
+
   it('supports no cues', () => {
     verifyHelper([],
         '',
@@ -59,6 +61,82 @@ describe('SrtTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
   });
 
+  it('supports payload stylized', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 10,
+            endTime: 20,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 10,
+                endTime: 20,
+                payload: 'Test',
+                fontWeight: Cue.fontWeight.BOLD,
+              },
+              {
+                startTime: 10,
+                endTime: 20,
+                payload: ' Unstyled',
+              },
+            ],
+          },
+          {
+            startTime: 20,
+            endTime: 30,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 20,
+                endTime: 30,
+                payload: 'Test2',
+                fontStyle: Cue.fontStyle.ITALIC,
+              },
+            ],
+          },
+          {
+            startTime: 30,
+            endTime: 40,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 30,
+                endTime: 40,
+                payload: 'Test3',
+                textDecoration: [Cue.textDecoration.UNDERLINE],
+              },
+            ],
+          },
+          {
+            startTime: 40,
+            endTime: 50,
+            payload: '',
+            nestedCues: [
+              {
+                startTime: 40,
+                endTime: 50,
+                payload: 'Test4',
+                color: 'red',
+              },
+            ],
+          },
+        ],
+        '1\n' +
+        '00:00:10,000 --> 00:00:20,000\n' +
+        '{b}Test{/b} Unstyled\n\n' +
+        '2\n' +
+        '00:00:20,000 --> 00:00:30,000\n' +
+        '{i}Test2{/i}\n\n' +
+        '3\n' +
+        '00:00:30,000 --> 00:00:40,000\n' +
+        '{u}Test3{/u}\n\n'+
+        '4\n' +
+        '00:00:40,000 --> 00:00:50,000\n' +
+        '<font color="red">Test4</font>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0});
+  });
+
   /**
    * @param {!Array} cues
    * @param {string} text