Page tree
Skip to end of metadata
Go to start of metadata

Introduction

Right now you have the option to upload your own custom fonts or use a rare font that it is not available at the moment on our widgets.

The procedure that you have to follow is very simple and it can be done in a few steps if you have the custom font already downloaded to your PC/Laptop.

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 login t your account first.

Secondly, click the +Add Custom Font button and a new page will appear.


In the next screen click the "Upload the ZIP file Font" and choose the ZIP file from your PC/Laptop.


After choosing the Custom Font of your choice just 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".

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

Prerequisites

The ZIP file must contain the relative following font formats:

  • TTF
  • OTF
  • WOFF
  • EOF
  • font.css
    (warning)
    The font.css file must be included on 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) to your ZIP file as long as the font family that you will use needs only 1 format to work properly.

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

DO NOT ZIP THE ENTIRE BASE FOLDER

When you are zipping all the files, make sure that 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.

What is the font.css file and why I need to include it to my ZIP file?

The font.css file is a simple CSS file including all the necessary data in order 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

This font.css file has been already created for the "KalamRegular" font family.

The source (src: ) is already pointing the correct file formats(eot, ttf, woff) which they 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

KalamRegular.zip

Creation Example

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

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

  1. 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 format

      Font-face formats

      url('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.rar


  • No labels