Custom Fonts

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.

Widgets

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 to log in to your account first.

upload custom fonts

Secondly, 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 upload it as a Custom Font to your account correctly?

The ZIP file must contain the relative following font formats:

  • TTF
  • OTF
  • WOFF
  • EOF
  • font.css
    (warning)
    The font.css file must be included in the ZIP file. Please check below how to create it.

Font 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 will use needs only one format to work correctly.

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

font files

DO NOT ZIP THE ENTIRE BASE FOLDER

When zipping all the files, make sure 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 will need to delete the base folder and ZIP only the relevant files.

wrong zip font file

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 at all.

How to create the font.css file

font files

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.

file.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');
}

Complete ZIP file for the “KalamRegular” font family

kalam-regular

KalamRegular.zip

Creation 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’)

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

piedra font

Piedra.rar