How to Use Custom Fonts With ScreenCloud Canvas App

Avatar
by Santino Scibelli
Follow

 

This article will go through how to set up using custom fonts while creating or editing templates using the ScreenCloud Canvas App. To learn more about how to set up the Canvas App, please click here for the app guide. Please note, this feature is currently in beta testing. 

Table of contents:

1. Create or edit a Canvas app instance

2. Find and use a custom font link in Canvas App

3. Frequently asked questions

 

Here’s how it works:

Create or edit a Canvas app instance

1.1. Get started by visiting your “Apps” and select an existing Canvas app instance. You can install a new instance or edit any existing Canvas template in your account.

Screen_Shot_2020-05-14_at_4.18.42_PM.png

 

1.2. While creating or editing your Canvas app, click on the “Text” button from the left-hand toolbar. This will prompt a new “New Text” editor to appear in your template.

Screen_Shot_2020-05-14_at_4.47.13_PM.png

 

1.3. Select the “New text” box which appears in the Canvas editor. If you already have an existing template, simply select an existing Text box to edit.

 

1.4. Using the right-hand side tool-bar, you’ll see a font drop-down selector. Click here to access the custom font feature, and fonts available through ScreenCloud for your template.

 

1.5. Scroll to the top of the font selector drop-down menu and click on the “+ New Font” option.

Screen_Shot_2020-05-14_at_5.43.37_PM.png

 

1.6. Selecting this will prompt a pop-up to appear where you’ll be required to enter a CSS Link or URL to use custom font. 

 

2. Find and use a custom font link in Canvas App

2.1. The custom font feature works by using a CSS Link or URL directly from a website. For example, you can use popular web services like Google or Adobe which have custom fonts available.

Screen_Shot_2020-05-14_at_5.45.17_PM.png

 

2.2. You will need to copy and paste a custom font URL from the web source. Here are a few samples of the type of CSS links and custom font URLs which work with the Canvas App from online services: 

Screen_Shot_2020-05-14_at_4.28.43_PM.pngScreen_Shot_2020-05-14_at_4.28.29_PM.png

 

2.3. Once you’ve copied the CSS link you’d like to use in ScreenCloud, copy it into the pop-up menu for your custom font. Please note, the CSS file must be web-hosted and the “Font Family” must match the font-family name within the CSS file provided for it to work properly.

Example with Adobe link:

Untitled__1_.png

 

Example with Google link:

Untitled.png

 

2.4. Once you’re done, click “Submit” and now you can access your custom font at the top of your font drop-down menu list while editing your Canvas App template. In this example, we’ve added the “Playfair Display” custom font which now appears in the drop-down menu.

Screen_Shot_2020-05-14_at_5.44.12_PM.png

Screen_Shot_2020-05-14_at_5.44.23_PM.png

 

Frequently asked questions

What useful tips should I know about using custom fonts with Canvas App?

  • This feature only supports web-hosted fonts using a URL or link.
  • This feature only supports uploading the default regular font type from a font family.
  • If the CSS link is invalid then the custom font will not work properly.
  • If the font family provided is incorrect then the custom font will not work properly.
  • Any fonts that currently exist in the Canvas app by default are unable to be added.
  • Font options “Bold” and “Italic” are already available in the Canvas style editor. 

 

Will a custom font automatically apply when I create a new Canvas App instance?

Any new Canvas app instances or templates will not carry over your custom fonts automatically. It’s required to set up the custom font each time you create a new Canvas app instance. We recommend duplicating an existing Canvas app template with your custom fonts set up to easily carry over your setup.

 

Is it possible to use multiple custom fonts on a template?

Yes, you can add multiple custom fonts one at a time. However, if you add a custom font that already exists it will overwrite the CSS link with a new link instead. Please note this while adding additional fonts to your Canvas app. 


If you have any additional questions on adding custom fonts to ScreenCloud Canvas App, or any other questions or feedback about ScreenCloud, feel free to reach out to our support team at support@screencloud.com or give us a call at our toll-free support line at +18885575335.

Comments

0 comments
Please sign in to leave a comment.