134
Views
3
Comments
Solved
How to add custom fonts

How can I add my own fonts in a reactive app? 

2025-07-28 06-45-20
Rupesh Patil
Solution

Hello @Ketaki Kotamkar 

Refer this link:

https://www.outsystems.com/forums/discussion/26548/how-to-add-a-new-font-family/

Or you can "import" the font, like this:

@import url("//fonts.googleapis.com/css?family=PT+Sans");

Thanks


UserImage.jpg
Ketaki Kotamkar

It helped. Thanks 

UserImage.jpg
Md Mansur

Hi @Ketaki Kotamkar 

Point 1-Download the font from Google Fonts 

Point 2-add it in the resources tab.(In Data Tab)


From there you will add a font-face in your style sheet like this:

@font-face {font-family: 'Myriad-Pro-Semibold-Condensed';src: url('/fonts/Myriad-Pro-Semibold-Condensed.eot');src: url('fonts/Myriad-Pro-Semibold-Condensed.eot?iefix') format('eot'),     url('fonts/Myriad-Pro-Semibold-Condensed.woff') format('woff'),     url('fonts/Myriad-Pro-Semibold-Condensed.ttf') format('truetype'),     url('fonts/Myriad-Pro-Semibold-Condensed.svg#webfontpQgNQDw9') format('svg');font-weight: normal;font-style: normal;}


From there you can reference the imported font using the font-family on your Screen or if you used theme Module than Import in Theme Module:

@import url("//fonts.googleapis.com/css?family=PT+Sans"); 


Thanks

Md Mansur


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.