How do I properly embed custom font in a web app developed in App Designer?
17 visualizaciones (últimos 30 días)
Mostrar comentarios más antiguos
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!
0 comentarios
Respuestas (2)
Pratik
el 31 de En. de 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!
Eric Delgado
el 5 de Ag. de 2024 a las 1:57
Editada: Eric Delgado
el 5 de Ag. de 2024 a las 1:58
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>
0 comentarios
Ver también
Categorías
Más información sobre MATLAB Web App Server en Help Center y File Exchange.
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!