2

I am creating a video about programming and I want to include subtitles having a .vtt extension. I think it is better if the coding and technical texts in the subtitles are displayed using the Consolas font. Like in this example:

Open Terminal and write sudo apt-get update

In the above example, the technical part is in Consolas font. So is this possible in a .vtt file?

user12208242
  • 315
  • 1
  • 11

2 Answers2

2

WebVTT supports a style block:

STYLE
::cue {
  font-family: Consolas, sans-serif;
}

If Consolas is not installed on the users computer, you should be able to use a web font.

Source: https://css-tricks.com/improving-video-accessibility-with-webvtt/

Smile4ever
  • 3,491
  • 2
  • 26
  • 34
2

Be aware that the '::cue' css-styling, as mentioned in the answer below, became deprecated in Video-js, beginning with version 6.x

[For details, see:] https://github.com/videojs/video.js/issues/4852

In my experience with VTT-styling with Video-js, there are also issues in some browsers, even if/when you remain back and use version 5.x of Video-js (which is what I've been doing). One such example is that in Firefox browser, the font color comes out WHITE, no matter what you specify. (Chrome will honor whatever font color you specify.)

David
  • 2,253
  • 5
  • 23
  • 29