Overview
Important note about the use of Custom Fonts in Yodeck
Custom fonts work only inside Yodeck’s Text and Default widgets.
They don’t affect how your Player displays websites or other media content.
Before You Start
Before uploading any custom fonts to the Yodeck platform, you need to create a zip file that contains two specific files. The first file is the actual font file (in unzipped form), and the second file is named font.css. You must create this font.css file manually, following our helpful guide provided below.
Here’s what you’ll need:
Your font file(s) saved on your computer.
A simple text editor such as Notepad or Notepad++.
A few minutes to create the small file called
font.css, via a text editor.
Find the Correct Font Name
Each font has a true name written inside the font file, which must be written correctly in the font.css file (which you will have to create later on) for it to function properly within the Yodeck platform. You can easily check the name yourself:
Double-click your font file (for example, '
.ttf' or '.otf' or '.woff' or '.eot').Look near the top for the Font name and Style name.
Write them down, as you’ll use them in the next step when creating the font.css file.
Custom Font 'True name' and 'Style name' locations
💡 Tip: Using the wrong font name is the most common reason fonts don’t show up correctly.
Font File Requirements
To upload a font to Yodeck, your ZIP file (which is analyzed further below) needs to have at least one of these types of font file extension (format) types:
.TTF-> TrueType Font: The most common type of font file, supported by almost all systems and browsers..OTF-> OpenType Font: A newer, more flexible version of TTF that can include extra design and language features..WOFF-> Web Open Font Format: A version of a font made specifically for the web — smaller file size, faster loading..EOT-> Embedded OpenType: An older Microsoft web font format. Still supported by Internet Explorer.
👉 You don’t need all of them. One is enough.
Delete any .txt file(s)
You might also see a file called OFL.txt or another readme text file, inside your font folder containing the font file. You must delete the '.txt' file so that it is not included in your final ZIP file, as analyzed further below.
Don’t zip the entire folder.
You’ll add the required files later, but make sure to include only the font file (.tff or .otf, or wof, or .eot) and the small font.css file, not the folder that contains them, nor the ofl.txt file.
Create the font.css File
This small file instructs Yodeck where the font is located and how to use it. Without it, the font cannot appear on screen.
Open the Notepad (or Notepad++).
Create a new file and name it
font.css.Then, copy this CSS code example below, inside the newly created file (font.css), by right-clicking it and selecting the Edit in Notepad option.
@font-face {
font-family: 'YourFontName';
src: local('YourFontName'), url(./YourFontFile.ttf) format('truetype');
}
Replace
'YourFontName'with the real font name you found earlier inside your actual font file.Example:
@font-face {
font-family: 'Hello Winter';
src: local('Hello Winter'), url(./Hello Winter.otf) format('opentype');
}'font.css' legend, based on the example above:
- local -> Contains the true name of the font "Hello Winter".
- url -> Contains the path url inside the zip file "./" , followed by the true font name "Hello Winter", followed by the font file extension ".otf", also known as font format.
- format -> Contains the font file extension, also known as the font format, written in full "opentype".
Replace
'YourFontFile'.otfwith the font's true file name.Example: "Hello Winter.otf"
Save the CSS file (font.css) in the same place where your font file (Hello Winter.otf) resides, for example, on your computer's 'Desktop'.
✅That’s it! Both your font file and the font.css file are now ready to be zipped.
Zip Your Files
Before uploading, you must combine your font file and the font.css file into one ZIP file.
✅ Correct ZIP Example | ❌ Incorrect ZIP Example #1 | ❌ Incorrect ZIP Example #2 |
Hello Winter.otf | MyFontFolder/ | Hello Winter.otf |
Steps for zipping together the two files
Select both the
font.cssfile and your font file.Right-click on any of them.
Choose the option: Compressed to... -> ZIP File.
Name the ZIP file (for example,
Hello Winter.zip).Open the zip file once to verify that you can see the two files directly, without them being inside another folder.
Zipping the two files together (Steps #1-3)
Providing a zip file name (Step #4)
Opening the zip file for verification (Step #5)
💡 Tip: If you open the ZIP and see a folder first, go back and zip the files again correctly.
Upload the ZIP to Yodeck
Now you can upload your custom font.
Log in to your Yodeck account.
Navigate to your Profile Icon button > Account Settings > Custom Fonts, and click the '+ Add Custom Font' button.
Click inside the Upload field to browse your computer and locate your custom font zip file.
Choose your ZIP file.
Then, to initiate the actual upload, click Save.
Wait a few seconds until the upload mechanism status changes from 'Extracting' to 'Finished'.
Landing page of Custom Fonts (Step #2)
Upload page of Custom Fonts (Steps #2-3)
Custom Font upload initiation (Step #5)
Finished upload of Custom Font (Step #6)
✅ Your custom font is now uploaded and ready to be used inside your Text or Default widgets.
Tips
💡 Keep these quick reminders in mind:
Double-check the font name matches exactly what’s written inside the font.css file.
Avoid spaces or special characters in file names.
Fonts from Google Fonts work great.
Test your font in a Text widget before publishing your layout.
Troubleshooting
If something doesn’t look right:
Make sure your ZIP includes only the
font.cssfile and the font file.Re-check that the font name in your CSS file matches your real font name (be mindful of spaces).
Try a different font format, like
.ttf,or.woff, or .otf, if it still doesn’t work.Confirm that the upload status indicates 'Finished' before using it.
ℹ️If it still won’t appear correctly, reach out to Yodeck Support. We are happy to help!
F.A.Q.s
Got questions? We’ve got answers! This section addresses common questions about the Custom Fonts.
Can I use my custom font on a website I show through Yodeck?
No. Custom fonts only work inside Yodeck’s Text and Default widgets.
They don’t affect websites or other external content.
Do I need every file type (TTF, OTF, WOFF, EOT)?
No. One is usually enough! Just include whichever format your font provides.
My upload keeps failing. What’s wrong?
Most of the time, the ZIP file includes a folder instead of the files directly.
Re-zip your font.css and font file together, without any folder or .txt files inside it.
Can I upload several fonts in one ZIP file?
No. Each ZIP file should contain only one font family file and its matching font.css file.
My font looks strange on screen. Why?
Usually, the font-family name in your CSS doesn’t exactly match the real name.
Open your font file in Notepad again, copy the correct name, and update your CSS file.
Need Help?
The Yodeck Support Team can help you out! Log in to your Yodeck account and send us a message from the bottom right corner!