Skip to main content
All CollectionsAccount SettingsLook & Feel
How to Add Custom Fonts to ScreenCloud for Enhanced Brand Consistency
How to Add Custom Fonts to ScreenCloud for Enhanced Brand Consistency

Add custom fonts in ScreenCloud via file upload or CSS link to align your screens with your brand for a cohesive look.

Updated over a month ago

In today's digital signage landscape, branding plays a pivotal role in connecting companies with their audiences. Custom fonts in ScreenCloud are a powerful tool for enhancing brand identity across your screens, ensuring that every detail aligns with your organization’s visual language. This guide will walk you through the process of uploading and using custom fonts within ScreenCloud themes - which apply to your apps - and directly in ScreenCloud’s Canvas app, whether sourced from Google Fonts, Adobe Fonts, or your font files.

By tailoring your fonts, you can create visually cohesive content that strengthens brand recognition and adds professionalism to your signage. Consistent font usage across all digital displays, from storefront screens to lobby displays, allows companies to leave a lasting impression on viewers while enhancing readability and engagement.

Custom Fonts is a premium add-on feature that requires a Pro plan or higher to use. Please find information on the pricing for these plans here. If you already have a ScreenCloud account, please reach out to your Customer Success Manager or reach out to ScreenCloud Support for more information on enabling this. To find out what other features are available on the Pro plan, check out the article Upgrade your ScreenCloud Subscription to Gain New Features and Apps!

1. Supported font types and formats

1.1. Font styles

You will see four types of text formatting on your screens, which is also the way you upload your font files.

  1. Regular

  2. Bold

  3. Italic

  4. Bold Italic

1.2. Font formats

When adding fonts, the font formats that are compatible with ScreenCloud are:

  1. TrueType (.ttf)

  2. Web Open Font Format (.woff, .woff2)

The Custom fonts can be integrated by uploading them to your ScreenCloud account, or by connecting them by a CSS embed link.

2. Adding Custom Fonts to ScreenCloud

Custom fonts can be added from the Look & Feel (or Themes) section of your ScreenCloud Account Settings. The font settings will only appear if your account is on the Pro or Enterprise plan. Custom fonts are added by either uploading a custom font file or by using a CSS link from an online open-source database for fonts, such as Google fonts and Adobe fonts.

To begin, click the Fonts section and get started by clicking Add Fonts.

3. Upload font files

3.1. Upload each font file accordingly: Regular, Bold, Italic, and Bold Italic. In our sample, we are uploading the font "Josefin Sans".

Custom Fonts 2024 02 - font upload.png

3.2. To complete the upload, name the font so that it is searchable in your account, and click Preview Font to see how the font will appear for your content.

3.3. If you are happy with the results, click Looks good, add this font to save it to your font library.

3.4. You will now find your newly added font in your font library in your Look & Feel page in your account settings. To learn how to apply the font to your content, head to

4. Add fonts with a CSS link

Alternatively, you can use your own CSS Embed link. Please note, while this method is available it is recommended to use the font file upload feature for convenience and accessibility to support specific font types. The link also must be in CSS format and the font family must also match the one provided in your ScreenCloud Studio account, for example:

If we are using and naming the font in ScreenCloud "Cooper Hewitt Book" then the corresponding CSS link must specify that the font family is "Cooper Hewitt Book".

4.1. Check if a font name matches a font family

For font styles (regular, bold, italic, bold italic) to work properly, the CSS file should be written using the same font family name. This is exampled below using the font "Inter":

Custom Fonts 2024 06 (2) - font upload.jpg

You will notice in the source CSS code from the weblink used to host the custom font, it specifies that the font family is 'Inter'. You must match the font family to the font name entered into your ScreenCloud Studio account. This has been identified in bold within the code sample below.

/* Example CSS link */ /* Regular */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: normal; src: url(<https://rsms.me/inter/inter-regular.woff2>;) format('woff2'); } /* Bold */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: bold; src: url(<https://rsms.me/inter/inter-bold.woff2>;) format('woff2'); } /* Italic */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: normal; src: url(<https://rsms.me/inter/inter-italic.woff2>;) format('woff2'); } /* Bold Italic */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: bold; src: url(<https://rsms.me/inter/inter-bold-italic.woff2>;) format('woff2'); }

Next, we will cover steps on how to connect Google Fonts and Adobe Fonts by their CSS link.

4.2. Adding Google fonts

Google Fonts is a free, web-based service that provides a vast library of open-source fonts for use in websites, applications, and documents. Users can browse, preview, and easily integrate fonts into projects without licensing fees. Google Fonts offers a variety of typefaces across many styles, such as sans-serif, serif, display, and handwriting, to meet diverse branding and design needs.

4.2.1. Find your desired font or the font that your company uses, and click Get font.

Custom Fonts 2024 07 - google font.png

4.2.2. Next, click < > Get embed code.

Custom Fonts 2024 08 - google font.png

4.2.3. Copy the CSS link, and take note of how the name of the font is written. In the example below the CSS link and font name are:

https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap
Josefin Sans

Custom Fonts 2024 09 - google font.png

4.2.4. In ScreenCloud, under Add Fonts, copy the font name to Font name and the CSS link to Use a stylesheet.

4.2.5. Click Preview Font to see how the newly added font looks for ScreenCloud content. If you don’t see the font taking effect, review the steps above on matching the font name and font family. Click Looks good, add this font to save your font.

4.2.6. Your font is now ready to be applied to a theme! You can head to step 5 to see how to apply the font to your theme and screens.

4.3. Adding Adobe fonts

Adobe Fonts (formerly Typekit) is an online service that provides a vast library of high-quality fonts accessible through Adobe’s Creative Cloud. It’s designed for both personal and commercial use in creative projects, allowing users to browse, sync, and use fonts directly in applications like Photoshop, Illustrator, InDesign, and even on websites.

4.3.1. Find your desired font or the font that your company uses, and click </> Add to Web Project.

4.3.2. Next, name your project and select the appropriate font formats or styles, and click Create. This project can only contain one font when applying to ScreenCloud.

4.3.3. Copy the CSS link and take note of the font family name.

From the sample below, the CSS link and font name are:

https://use.typekit.net/xmn8kti.css
josefin-sans

4.3.4. In ScreenCloud, under Add Fonts, copy the font family name to Font name and the CSS link to Use a stylesheet. Go ahead and click Preview Font.

4.3.5. Check to see that the font is reflected in the preview sample, and if you are happy with it, hit Looks good, add this font.

4.3.6. The font is now ready to be used for your digital signage screens.

5. Apply the font to your screens

5.1. Find a channel you wish to apply your newly added font to, click Settings, and then toggle on the Apply Theme option. Next, click Switch Theme.

5.2. Select the theme you wish to apply the font to.

5.3. Under Fonts, you can select your new font for the Title font and/or Body font. Click Save to apply the changes.

5.4. With the font now added to the theme, you can preview the channel to see the font take effect.

For more detailed steps on setting up themes for channels, please see How to Use Look and Feel To Create Custom Branded Themes or Upload Custom Fonts.


With these steps, you’re now equipped to add your unique style to any ScreenCloud theme with custom fonts. Whether you’re looking to enhance readability, and brand consistency, or simply add a personal touch, custom fonts can make a world of difference in how your content is perceived. Keep exploring the options and experimenting with different font combinations to find what works best for you. Remember, a well-chosen font can transform your content from standard to standout!

Did this answer your question?