Customization

The extension uses CSS to change the look of the overlay, you can change some of it's properties in the Theme Editor Section of the options menu

Fonts

The extension expects a link to a file containing css font faces.

Using Google Fonts

You can find a collection of fonts at Google Fonts Once you've select a font you like press the Get font button and then the View selected families button at the top right.

Press the Get embed code and copy the font face link to your clipboard.

You can then use this link in the overlay theme editor, the overlay will update immediately.

Using a custom font

If your font is not on google fonts, you will need to make a font face file yourself and host it somewhere accessible. Then, you can link to it in the overlay theme editor.

A usual font face file looks like this:

@font-face {
  font-family: 'Name does not matter';
  src: url('https://yourdomain.com/path/to/font.woff2') format('woff2'),
       url('https://yourdomain.com/path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

You can use services like Google Drive to host your WOFF files.

Google drive

To use google drive:

1. Make the file available to anyone with the link
2. Open the share link in a new TabItem
3. Click the download button and copy the link of the tab opened when you do so
4. Use the copied link in your CSS font face file

Using the share link WILL NOT work

Overlay styles

Overlay styles are changing the structure of the overlay (html) rather than it's style (css). Not all styles are compatible with every setting and the list will continue growing. You can find a collection of styles at Overlay Styles