Clear Filters
Clear Filters

How do I properly embed custom font in a web app developed in App Designer?

3 views (last 30 days)
Hi all,
I have been building a web app through App Designer on MATLAB R2023b and tried to use the custom fonts "Kanit" and "Montgomery" for my UI.
Although the custom fonts show in the app on my developer desktop after copying them to "<matlabroot>\sys\java\jre\win64\jre\lib\fonts", the app shows a fallback font on a different computer through my LAN.
My question is how do I ensure that the web app also use these custom fonts on computers that do not have them installed?
I have attempted to embed an HTML block in the app UI to access the Google Font API with the following code,
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=kanit"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=montgomery">
but my Chrome browser's console returned the following error message "Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=kanit' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback."
All help would be greatly appreciated - thank you!

Answers (2)

Pratik
Pratik on 31 Jan 2024
Hi Osborn,
As per my understanding, you want to use custom font for your MATLAB Web App, such that the custom font can also be accessed for a Web App which is not running on the developer desktop. To accomplish the same, you have also tried to embed an HTML block in app UI however Chrome browser’s console returns an error message.
The locations that need to be searched for fonts are typically write-protected and might need administrative access to install. Unfortunately, MATLAB does not offer this feature. Hence directly passing font information along with app package will not work.
To fix the error when using HTML block, you need to authorize the URL in a style-src directive. Please refer to the tag below for reference:
<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">
By including this tag in your HTML, you should be able to use custom fonts without encountering the error message in the Chrome console.
Please refer to this stackoverflow question which discusses about the above issue:
I Hope this helps!
  1 Comment
Osborn
Osborn on 1 Feb 2024
Hi Pratik,
Thank you for your time answering my question.
Unfortunately, this does not solve my issue, as I would like the font to show in all components (i.e., not just the HTML block).
I did try including your meta tag in an HTML block in my MATLAB web app, but it did not have any effect outside the HTML block. This seems to be because the web app puts the HTML block inside an iframe.
Your stackoverflow link was very helpful in providing background info.
Thanks again.

Sign in to comment.


Eric Delgado
Eric Delgado on 5 Aug 2024
Edited: Eric Delgado on 5 Aug 2024
Hi @Osborn, you have to edit the webapps.config file of the MATLAB WebServer, including the possibiity to execute inline code. The default path on Windows is:
  • C:\ProgramData\MathWorks\webapps\R2023b\config
Below what you have to add to your file (note that I add not only style-src directive, but script-src directive as well):
<ContentSecurityPolicy>
<script_src>'unsafe-inline'</script_src>
<style_src>'unsafe-inline'</style_src>
</ContentSecurityPolicy>

Categories

Find more on MATLAB Web App Server in Help Center and File Exchange

Products


Release

R2023b

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!