Reactive Web - Difficulty in changing the font through uploaded resource

Hello,


I tried to change the font in my Reactive Web App by following the instructions here but I was not able to come across the font having uploaded it to the Resources folder earlier 

Moreover, I also tried to give the full URL which I presume to be 'Resources/Poppins-Regular.ttf' which also gives the same result. If I were to manually type Poppins-Regular into the font family of the class 'lorem', it will just revert to the fallback OutSystems font which I assume to be Times New Roman.

As a reference, I will also link the Poppins font. Feel free to let me know if you spotted any error on my part.



Best Regards,


Yosua

Hi Yosua,

did you select option 'Deploy Action' to Deploy to Target Directory.

Please check once.


Regards

Rahul

Hi,

You can do this using (as example) the following css

@font-face {    
    font-family: 'Bree Serif';
    src: url('/MSP_Home/BreeSerif-Regular.ttf') format('truetype');
    font-weight: normal;    
    font-style: normal;
}


Notice the scr(source): url parameter?

You need to add the the font file as a file in the resources (deploying to a target folder).

(example with an excel file)

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

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

Those are just examples.

There is no difference using custom fonts between web and mobile applications.


Cheers,

Miguel



POST SOURCE: https://www.outsystems.com/forums/discussion/26831/adding-custom-fonts/ 

Hello,


Yes I have selected "Deploy to Target Directory" as my font file's Deploy Action, but it still gives me the same result. Should I put it in a directory inside Resources (e.g. Resources/FontFile/Poppins-Regular.ttf)?



Yosua