Skip to main content

Custom Styles

Subtitle Style Customization Options:

  • Subtitle Size
  • Subtitle Spacing
  • Subtitle Position
  • Font Weight
  • Font Style
  • Color
  • Background Color
  • Background Color Opacity

Google Fonts​

  1. Go to Google Fonts and choose the font you like.

  2. On the font page, find and click the Get font button.

44

  1. Click Get embed code.

45

  1. Select @import.

46

  1. We need to copy two parts here:

47

Part One

For the font I chose, the embed code provided by Google looks like this:

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

We only need to copy the part after the question mark in the URL (highlighted in red in the image above) and paste it into the Google Fonts (Font families) field in the plugin options page. In this example, I only need to copy family=Noto+Sans+JP:[email protected]&display=swap.

Part Two

For this font, the style code provided by Google looks like this:

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

We only need the part highlighted in red in the image above.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

Sometimes you need to fill in some values inside the styles. For example, for this font, the value for font-weight is <weight>, which means you need to provide a value. These placeholders are usually enclosed in <>. You can find corresponding values on Mozilla.

For font-weight, we can use normal.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

Paste this into the Google Fonts (CSS properties) field in the plugin options page.

  1. Complete the setup.

49

  1. Return to the video page to see the applied font. The image below shows Noto Sans Japanese and Noto Serif Japanese in use.

50