In ODC Studio I created a Library module as the base theme for an application.
On this module I have the CSS and the web fonts (woff, woff2) files that are reffered on the CSS only.
After after testing the page on the browser Google Dev Tools, on the network tab, returns a 404 error for the fonts files.
After a while the only way I found to workaround this issue was to add the font files directly on the reactive app module but had to keep the same files on the library module, basically duplicating them.
How should a developer consume custom web fonts on a library module in ODC Studio?
Hi @Mario Andrade,
Greetings!
I think this discussion link will be helpful for you:https://www.outsystems.com/forums/discussion/26831/adding-custom-fonts/#:~:text=You%20need%20to%20add%20the,deploying%20to%20a%20target%20folder).&text=Or%20you%20can%20%22import%22%20the,family%3DPT%2BSans%22)%3B
Best Regards,
Ananya
Hi @Mario Andrade
You should upload the font files as a resource (Data tab --> Resources --> Import Resource) and Deploy to Target Directory.
Next in your css:
@font-face { font-family: 'Poppins'; src: url('/<library_name>/Poppins-Thin.woff') format('woff'); font-weight: 400; font-style: normal; }
Hello @Mario Andrade
Refer this link:
https://www.outsystems.com/forums/discussion/26548/how-to-add-a-new-font-family/
I hope this helps
Thanks
¿Encontraste una solución? Me pasa lo mismo.
With this it worked for me
@font-face { font-family: "MaterialFont"; src: url("/BaseTheme/MaterialFont.eot"); src: url("/BaseTheme/MaterialFont.eot") format("embedded-opentype"), url("/BaseTheme/MaterialFont.ttf") format("truetype"), url("/BaseTheme/MaterialFont.woff") format("woff"), url("/BaseTheme/MaterialFont.svg") format("svg"); font-weight: normal; font-style: normal; font-display: block;}Base theme being the name of the Libraryalso I found this guidehttps://itnext.io/how-to-import-a-text-font-into-a-library-in-outsystems-odc-b6aff4f9b450