Custom player templates are available only for Brightcove Pro and Enterprise customers. If you are interested in upgrading your Brightcove account, please contact Brightcove for more information.
The standard labels in Brightcove players use system fonts, which are fonts installed by the operating system on the viewer's machine. By default, all fonts are system Arial. There are at least three approaches you can take to customizing the fonts used by labels:
Note: If you modify fonts in a player template, be sure to preview the modified player to make sure that the labels still fit within the player layout. If the font you choose causes labels to be significantly longer than the default labels, they may no longer fit and might be truncated in display or prevent other player components from rendering correctly. If that happens, you may need either to select a different font, re-word your label, or make other modifications to the player layout to make the label fit.
You can specify fonts globally in the Theme element of a player template. There are three global fonts attributes you can use in the Theme element, for body, title, and link (buttons generally use the link font). To change the font of all body, title, or link texts, set the appropriate attribute in the Theme node to the font you want to use. For example, to set the bodyFont, titleFont, and linkFont to system Times New Roman, use a Theme element like this:
<Theme name="Deluxe" style="Light"
bodyFont="Times New Roman"
titleFont="Times New Roman"
linkFont="Times New Roman" />
Instead of setting a font at the global level for all body, title, or link components, you can specify fonts for a single class of component in a player template. To do this, include a Style element as a child of your Theme element. In the Style element, the class attribute specifies the component class. Inside the Style element, you can use inline CSS to specify the font and other styles. For example, to set the body text of all Label components in the player to system Times New Roman, include in your Theme element a Style element like this:
<Style class="Label"><![CDATA[
.bodyText {
fontFace: "Times New Roman";
}
]]</Style>
The following components have a font attribute and can have their font set this way:
You can also specify the font for a single instance of a component in a player template. To do this, include a Style element as a child of your Theme element. In the Style element, the id attribute specifies the single instance of a component that is affected. Inside the Style element, you can use inline CSS to specify the font and other styles. For example, to set the body text of a single Label component with the id "myLabel" to system Times New Roman, include in your Theme element a Style element like this:
<Style id="myLabel"><![CDATA[
.bodyText {
fontFace: "Times New Roman";
}
]]</Style>