Introduction
Right now, you can upload your custom fonts or use a rare font that is not available at the moment on our widgets. The procedure you have to follow is straightforward, and it can be done in a few steps if you have the custom font already downloaded to your PC/Laptop. The Custom fonts are applied only to the existing Default widgets and Text widgets and not to the player’s font database. The player will not inherit any uploaded custom font to display your web pages with that font.
How to upload a Custom font to your account
- Click the +Add Custom Font button, and a new page will appear.
- Click the ” Upload the ZIP file Font ” on the next screen and choose the ZIP file from your PC/Laptop.
- After choosing the Custom Font of your choice, click the Save button, and the Custom Font ZIP file will upload to your account.
- The Custom Font has been uploaded successfully to your account if the Status has changed to “Finished.”
ZIP file prerequisites
What must the ZIP file include to correctly upload it as a Custom Font to your account?
The ZIP file must contain one of the following font formats:
- TTF
- OTF
- WOFF
- EOF
- font.css
⚠️The font.css file must be included in the ZIP file. Please check below how to create it.
Google FontsFont Family, and you can download any font family from the Google Fonts site
Do all Google fonts have all these files?
No, some Google fonts might have only one file format, like the Piedra font family.
It is not a prerequisite to have all the font formats(TTF, OTF, WOFF, EOF) in your ZIP file as long as the font family you use needs only one format to work correctly.
Ignore the OFL.txt file totally; it is just a readme file.
DO NOT ZIP The entire base folder
When zipping all the files, ensure you DO NOT zip the base folder but only the relevant files. The below ZIP method will not work, and the custom font will not upload properly on your account. You must delete the base folder and ZIP only the relevant files.
What is the font.css file, and why do I need to include it in my ZIP file?
The font.css file is a simple CSS file including all the necessary data for the player to be able to render the specific font family to your TV screen,
If you do not include the font.css file, the player will not be able to display it on your TV screen.
How to create the font.css file
This font.css file has already been created for the ” KalamRegular ” font family.
The source ( src: ) is already pointing to the correct file formats (eot, ttf, woff), which are also included in our ZIP file.
font.css
@font-face {
font-family: ‘KalamRegular’;
src: local(‘KalamRegular’), url(‘./KalamRegular.eot’) format(’embedded-opentype’), url(‘./KalamRegular.woff’) format(‘woff’), url(‘./KalamRegular.ttf’) format(‘truetype’);
}
Example
This specific font family, ” Piedra, ” does not have a file.css at the moment, so let’s create it.
Ignore the OFL.txt file totally; it is just a readme file.
- Please create a new Text Document and name it file.css
- Use the following format and make the required changes regarding:
- The name of the Font Family
- The source(src:) of the Font Family
- The proper Font-Face formatFont-face formatsurl(‘webfont. eot ‘) format(’embedded-opentype’) url(‘webfont. otf ‘) format(‘opentype’) url(‘webfont. woff ‘) format(‘woff’) url(‘webfont. ttf ‘) format(‘truetype’)
file.css
@font-face {
font-family: 'Piedra-Regular';
src: local('Piedra-Regular'), url('./Piedra-Regular.ttf') format('truetype');
}
Complete ZIP file for the “Piedra” font family