This article will go through details on why certain custom font URLs don't work while using ScreenCloud's app theme editor. A common reason for custom fonts not working properly in ScreenCloud, and other third-party websites, can be caused by a website/server security policy block on what is known as CORS requests. Below we explain more on how CORS requests affect using custom font URLs with ScreenCloud.
Table of contents:
1. What are CORS requests and how do they affect using Custom Font URLs?
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) than its own origin.
If you're using a custom font URL from a third-party website or source you've found online which isn't working correctly, it's likely that the servers which host the custom fonts may have restrictions which deny CORS requests. This would block the custom font URL from rendering in ScreenCloud players due to this restriction.
For example, a custom font such as https://www.volflight.se/static/static/fonts/Klavika-BoldItalic.woff2 would not be able to work properly in our player. The server which hosts the custom font URL denies CORS requests and the custom font cannot be rendered in ScreenCloud. However, a custom font from a website such as Google (https://fonts.googleapis.com/css?family=Tangerine) works correctly as it doesn't block CORS requests so the custom font is rendered correctly.
Please note, it's possible that iOS devices can occasionally display the blocked custom fonts in comparison to other ScreenCloud players as the operating system has a known bug in their WebKit. This bug has caused iOS devices to not enforce the CORS header request policy and causes the devices to render the custom font URL. However, It's not advised or recommended to use iOS devices to display custom font URLs which block CORS requests as a workaround. This method is not secure and iOS devices are considered to be low performers for long-term digital signage use.
2. Is there any way to fix the Custom Font URL to work correctly?
To resolve the CORS request issue with a custom font URL, we recommend reconfiguring the server by adding the following bit of code into the backend of the host site:
You can provide this code to your web administrator (if it's your own website or server), or recommend to connect with the web administrator for the host website to see if they can change or resolve this restriction. If you have any additional questions on this, please feel free to contact firstname.lastname@example.org and provide us with the custom font URL you're having trouble with. Our team will do the best we can to give you direction for using the custom font URL in ScreenCloud's app theme editor.
If you have any additional questions on using custom fonts in ScreenCloud, or any other questions or feedback about ScreenCloud, feel free to reach out to our support team at email@example.com or give us a call at our toll-free support line at +18885575335.