Skip to content
yodeck digital signage
  • FAQ
  • Support Center
  • Contact
  • Home
  • Getting Started
    • Portal Overview
      • Overview of the Yodeck Portal
      • Pushing Changes to Screens
      • Help Icons
    • Creating a Yodeck Player
      • Creating a Yodeck Player - Introduction
      • Creating a Yodeck Player based on Raspberry Pi 4
        • Downloading and using Etcher
        • Yodeck Raspberry Pi Compatibility Chart
        • Creating a Yodeck Player based on Raspberry Pi 4 - Introduction
        • Raspberry Pi Comparison
        • What is the Yodeck Player?
        • Notes for the RPi 4
        • Connect the Yodeck Player to a WiFi using your mobile phone by scanning a QR code
      • Creating a Yodeck Player based on Raspberry Pi 5
        • Creating a Yodeck Player based on Raspberry Pi 5 - Introduction
        • Raspberry Pi 5 Limitations
      • Creating a Yodeck Player based on Chrome browser
        • Setting up a Yodeck Web Player
        • Comparison Table RPi vs Web player
        • Web Player Chrome Extension and PWA
      • Create a Yodeck Android Player
        • Create a Yodeck Android Player - Introduction
        • Setting up an Android player with the Yodeck Software (via APK)
          • Install Yodeck in Android with Setup Helper
          • Setting up an Android player with the Yodeck Software (via APK--Android 7 or earlier)
        • Creating a Yodeck player based on Android
          • Setting up an Android player with the Yodeck Software (from Play Store)
          • Tested and Approved Android Devices
          • Android Limitations
      • Create a Yodeck Amazon Player
        • Create a Yodeck Amazon Player - Introduction
        • Setting up a Yodeck Amazon FireOS Player
        • Creating a Yodeck Player based on Amazon FireOS TV/Stick
          • Setting up a Yodeck Amazon Signage Stick Player
          • Amazon FireOS Limitations
      • Creating a Yodeck Player based on Brightsign
        • Setting up a Brightsign player with the Yodeck Software
        • Comparison Table RPi vs Brightsign player
        • Supported Brightsign Players
      • Creating a Yodeck Player based on Tizen
        • Samsung SSSP / Tizen Supported Devices
        • Setting up a Tizen player with the Yodeck Software
        • Tizen Limitations
        • Update the firmware version on your Samsung Tizen TV
      • Creating a Yodeck Player based on webOS
        • Setting up an LG webOS player with the Yodeck Software
        • LG webOS Supported Devices
        • LG webOS Limitations
      • Creating a Yodeck Player based on Windows
        • Setting up a Windows player with the Yodeck Software
        • Windows Supported Devices
        • How to uninstall the Windows application
      • Creating a Yodeck Player based on ChromeOS
        • Setting up a Yodeck ChromeOS Player
        • ChromeOS Limitations
    • Getting Started FAQs
    • Logging into the Yodeck Portal and creating an account
  • Navigating the Platform
    • Main Menu Overview
    • Dashboard Overview
    • The Dashboard
  • Media & Apps Management
    • Media Overview
      • Supported File Extensions
    • Apps
      • Apps Introduction
      • Available Apps!
      • Add-on Apps
      • App Compatibility Table
      • Custom App Developer Guide
        • Static Apps
        • Custom Apps Introduction
        • UI Form Definition for Custom Apps
        • Building a Web App
        • App Codes & Examples
          • Display Public IP (sample App)
          • The Simple Clock
          • Shedul (sample App)
          • Trello (sample app)
          • Current Weather
          • Digital Clock (sample App)
          • Monthly Calendar
          • Calendar Events Feed
          • Date&Time App Code
          • Daily Weather App Source Code
          • ChartMogul (sample app)
          • Sample Web Widgets
          • Sample HTML Widgets
          • Tutorial - Your 1st Widget
          • Baremetric (sample app)
          • Hourly Weather App Source Code
          • Google Calendar (Sample App)
          • Count Down/Up
          • Rich Text (Sample App)
          • RSS Custom
        • Building an HTML App
          • Analog Clock (sample App)
          • 4. Adding Transparency (Optional)
          • 3. Making the Clock Efficient
          • HTML App API
          • HTML App Packaging
          • Player HTTP API
          • 2. Add Options to the Clock App
          • 5. Zipping and Uploading the Custom Sample Clock
      • Add-ons
        • Embeddable Feeds - Add-on
          • Embeddable Feeds
          • Counting Embeddable Feeds' Views
      • Custom Apps
      • News Apps
        • CTV News
        • Yahoo
        • The New York Times
        • The Wall Street Journal
        • Fox News
        • Sky News RSS
        • BBC RSS
        • CBC RSS
        • ESPN RSS
        • The Guardian RSS
        • Al-Jazeera RSS
        • CNN RSS
        • Google News RSS
        • Google Alerts
        • SharePoint News
        • Bloomberg News
        • Custom RSS
      • Social Apps
        • Instagram
        • Viva Engage
        • Walls.io
        • Facebook
        • Twitter
        • Taggbox Display
        • LinkedIn
        • Microsoft Teams Town Hall
        • Microsoft Teams Rooms
      • Dashboard Apps
        • Google Looker Studio
        • SmartSheet
        • Airtable
        • Teams Channels
        • SharePoint
        • Tableau JWT
        • Cyfe
        • My Dashboard
        • Asana
        • Tableau
        • Google Analytics
        • Xero
        • Fathom
        • Shedul
        • Trello
        • Power BI
        • Zoho
        • Baremetrics
        • Putler
        • ChartMogul
        • Chargebee
        • Zenkit
        • Grafana
        • Canva
        • Monday.com
        • Jira
        • Power BI with Service Principal
          • Power BI with Service Principal - Identity Requirements
          • Power BI with Service Principal - Introduction
      • Calendar Apps
        • Calendar Apps Introduction
        • Google Calendar
        • Outlook Calendar
        • Daily/Weekly Calendar
        • Monthly Calendar
        • Calendar Events Feed
      • General Apps
        • Ticker
        • Qube
        • Google Slides
        • DSMenu
        • TV Source
        • Teams Celebrations
        • Word Clock
        • Counter Up
        • Counter Down
        • Notion
        • Weather Radar
        • Weather Wall
        • Google Sheets
        • Planner App
        • Interactive Library
        • Zoom Rooms
        • WiFi Share
        • Embed
        • Player Basic Info
        • Google Traffic
        • Birthday Notification
        • PosterMyWall
        • Date & Time
        • WikiQuotes
        • Current Weather
        • Hourly Weather
        • QR Code
        • World Clock
        • Analog Clock
        • Online Slideshow
        • Rich Text
        • Daily Weather
        • Interactive Kiosk
          • Custom Keyboard Guide for Interactivity
          • Interactive Kiosk - Introduction
    • Apps Management FAQs
    • Media Library
      • Audio Assets
      • Documents
      • Scheduled Availability
      • Images
        • Gallery
        • Images Introduction
      • Videos
        • How to create a simple Video-wall with Yodeck
        • How to setup an HDMI video feed input or connect a USB camera (Video Input)
        • Recommended USB devices
        • Videos Introduction
      • Web Pages
        • Web Pages Introduction
        • Web Scripting Engine & Webpage Recording Tool
          • Hide Cookie Banner - Script Automation (BETA) 
          • Webpage Recording Tool
          • Web Scripting Engine
            • Scripting Engine Reference
            • Scripting FAQ
            • Scripting Templates
            • Tutorial - Google Analytics
            • Tutorial - How to remove the cookie pop-up from your web page media
            • Useful Scripts To Use
            • Mask your credentials at the Scripting Engine text field
    • Media Management FAQs
    • Media Availability
  • Content Management & Scheduling
    • Playlists
      • Playlists Introduction
      • Managing Playlists with Folder View ON
      • Interactive Playlist
      • Playlist of Layouts
      • Tag-Based Playlist [Premium & Enterprise Plans only]
      • Sub-Playlists [Premium & Enterprise Plans only]
      • Import CSV [Premium & Enterprise Plans only]
      • OneDrive Playlist
      • Dropbox Playlist
        • Dropbox Playlist Introduction
        • Dropbox - OneDrive - SharePoint Supported Media Formats
      • Playlists' FAQs
    • Layouts
      • Getting Started with the Yodeck Layout Editor
      • Editing and Customizing Content in the Layout Editor
      • Working with Screen Sizes and Aspect Ratios in the Layout Editor
      • Locking Elements and Controlling Access in the Layout Editor
      • Advanced Settings and Scheduling Layouts in the Layout Editor
      • Branded Templates: Create and Manage Reusable Layout Designs
      • Layouts' FAQs
    • Schedules
      • Schedules Introduction
      • Examples of Schedules
      • Turned Off option - How to Turn your TV On and Off
      • Schedules' FAQs
  • Screen & Device Management
    • Screens Overview
      • Basic Info
      • Location
      • Media Filtering
      • Screen Takeover
      • Screens Overview Introduction
      • Screens Table Manual
      • Status
      • Working Hours
    • Adding & Managing Screens
      • Screen Email Notifications
      • Sound/Display
        • Sound/Display Introduction
        • Support for LED board screens and billboards
      • Network
        • Network Introduction
        • Proxy
        • Static IPs
        • Wireless
          • Configuring your player's WiFi network by editing the SETTINGS.TXT file
          • Configuring your WiFi network using an Ethernet cable
          • Quickly connect your Yodeck player to your WiFi network by using the WiFi wizard
          • Wireless Introduction
        • 3G/4G/LTE
          • 3G/4G/LTE Introduction
          • Advanced Configuration for 3G / 4G / LTE modems
    • Assigning Content to Screens
      • How to quickly assign content to your Screens
    • Monitoring Screen Status
    • Advanced Screen Options
      • Advanced Screen Options Introduction
      • On-screen Messages
      • Timed Events
      • Customization
        • Custom arguments/policies for Chromium
        • Customization Introduction
        • How to add custom proxy settings per Web Page using the Advanced Player Directives
      • Security
        • Security Introduction
        • Custom Certificates
        • Encrypt Player Storage [Enterprise Plan only]
        • Lock Down Player [Enterprise Plan only]
    • Interactivity
      • Interactivity Introduction
      • GPIO-Triggered Signage with Yodeck
        • GPIO Demo App: ON/OFF Trigger Example
        • GPIO HTTP API
        • GPIO Technical Documentation
        • Introduction to GPIO-Triggered Signage with Yodeck
    • Screen FAQs
  • User & Account Settings
    • Users & Groups
      • Users
      • Custom Roles
      • Groups
    • Account Settings
      • Account settings Introduction
      • Playback Reports
      • Volume Schedules
      • Security Policies
      • Audit Log
      • Custom Fonts
      • Players Boot Logo
      • Emergency Alerts
        • Default Emergency Alert Types
        • Common Alerting Protocol (CAP) Integration
        • National Weather Service Alerts
        • Emergency Alerts Introduction
      • Single Sign-on (SAML 2.0)
        • How to configure SSO with Salesforce
        • Introduction to Single Sign-on (SAML 2.0)
        • How to configure SSO with ADFS
        • How to configure SSO with Azure Active Directory (Microsoft Entra)
        • How to configure SSO with G Suite
        • How to configure SSO with OneLogin
          • How to configure SCIM with OneLogin
        • How to configure SSO with Okta
          • How to configure SCIM with OKTA
        • How to configure SSO with Azure Active Directory (Microsoft EntraID)
          • How to configure SCIM with Azure directory (EntraID)
    • Workspaces
      • Workspace Hierarchies
      • Workspaces Introduction
    • User & Account FAQs
    • My User Profile
    • Subscriptions & Billing
  • Help & Troubleshooting
    • Help Menu Overview
    • Troubleshooting
      • Issues with Logging into Yodeck Portal
      • Step-by-Step Troubleshooting Guide
    • Help & Troubleshooting FAQs
      • Tech FAQs
      • General FAQs
  • Best Practices
    • Best Practices Overview
  • Partner Portal
    • Partner Administrative Console
      • Introduction to Partner Administrative Console
      • Invoices
      • Recent Actions - Support/Download Links - Contact Us
      • Staff Permission Roles
      • Applications
        • 2.1 Audit Logs
        • 2.2 Site Settings
        • 2.3 Accounts
        • 2.4 Devices
        • 2.5 My Users
        • Applications Introduction
      • Quick Links
        • Order Form for Partners
        • Quick links - Introduction
      • Creating Whitelabel Playlists
        • Create a Whitelabel OneDrive playlist
        • Create a Whitelabel Dropbox playlist
          • How to configure the Dropbox Playlist to your client's account
          • Introduction to Creating a Whitelabel Dropbox playlist
        • Create a Whitelabel Google Drive playlist
          • Create a Whitelabel Google Drive playlist - Introduction
          • How to configure the Google Drive Playlist to your client's account
    • Partner Portal FAQs
    • Introduction to Yodeck Partner Manual

HOME Documentations Custom Fonts

Custom Fonts

Last updated on February 22nd, 2021

Table of Contents

  • Introduction
  • How to upload a Custom font to your account
  • ZIP file prerequisites
      • Google Fonts
  • Do all Google fonts have all these files?
    • DO NOT ZIP The entire base folder
  • What is the font.css file, and why must I include it in my ZIP file?
  • How to create the font.css file
      • font.css
  • Example

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.
info

Google Fonts

Font Family and you can download any font family from the Google Fonts site


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.

info

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

  • Homepage
  • General
    • What is Digital Signage
    • Free Signage Software
    • Raspberry Pi Signage
  • Product
    • Features
    • Apps
    • Free Signage Templates
    • Solutions
  • Support
    • Contact
    • Support Center
    • Give Feedback
    • FAQ

Copyright © 2015-2025 Flipnode LLC | All rights reserved.