Custom Fonts

Introduction

You can now upload your custom fonts or use a rare font unavailable 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

The first thing you have to do is to follow this link. If you are not already logged in to the Yodeck account, it will request you log in to your account first.

upload custom fonts
  1. Secondly, click the +Add Custom Font button, and a new page will appear.
  2. Click the ” Upload the ZIP file Font ” on the next screen and choose the ZIP file from your PC/Laptop.
  3. After choosing the Custom Font of your choice, click the Save button, and the Custom Font ZIP file will upload to your account.
  4. The Custom Font has been successfully uploaded to your account if the status has changed to “Finished.”

ZIP file prerequisites

What must the ZIP file include to upload it as a Custom Font to your account correctly?

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.

Do all Google fonts have all these files?

Some Google fonts, like the Piedra font family, might have only one file format.

Having all the font formats(TTF, OTF, WOFF, EOF) in your ZIP file is not a prerequisite 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 must I 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 cannot 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), also included in our ZIP file.


Example

This specific font family, ” Piedra, ” does not have a file.css at the moment, so let’s create it.

font files

(info) Ignore the OFL.txt file totally; it is just a readme file.

  1. Please create a new Text Document and name it file.css
  2. Use the following format and make the required changes regarding:
    1. The name of the Font Family
    2. The source(src:) of the Font Family
    3. 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’)

font.css

@font-face {
	font-family: 'Piedra-Regular';
	src: local('Piedra-Regular'), url('./Piedra-Regular.ttf') format('truetype');
}