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

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!

Answer 1

[Pratik]

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:

www.stackoverflow.com/questions/33984908/google-fonts-violates-content-security-policy

I Hope this helps!

[Osborn]

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.