Custom Fonts are not working on Pavlovia

Online experiments
, , ,
1

I want to use custom fonts for my experiment. The following code works on my machine but not on Pavlovia:


number.fontFiles = ["OldSport01CollegeNcv-aeGm.ttf"]  
number.setFont('OLD SPORT 01 COLLEGE NCV')

I saved the .ttf file in the same folder as the experiment. Does anyone has an idea why the font is not working on Pavlovia? Could it be that the translation from Python to Javascript is causing the problem?

The automatically generated JS code:

number.fontFiles = ["OldSport01CollegeNcv-aeGm.ttf"];
number.setFont("OOldSport01CollegeNcv-aeGm");

Many thanks in advance!

2

Hey! I’m afraid custom fonts don’t work yet on PsychoJS. Well… not out the box, that is. I’ve once made a little demo that shows a workaround for it. It’s not flawless though; I need to resize my page to get it to work. Might work with a bit of tweaking. Thomas Pronk / demo_font · GitLab

3

Thanks @thomas_pronk - are there any other work arounds. I would like to use only the BACS font for this new experiment and being unable to customize fonts is a real bottleneck. Any suggestions on how to launch this would be really helpful. BTW I tried adding this to the index.html and it doesn’t work ```
@font-face {
font-family: “BACS”;
src: url(“https://osf.io/w4gpc/download” format("otf)),
}

4

Hi @Ram-Maha, There could be a couple of reasons it doesn’t work. For instance, you’re downloading an OTF font, while demo uses a TTF font, maybe that’s a problem? Also, be sure that the font-family matches between the font and the text-stimulus.

Having said this, note I’ve only managed to build a propotype; it’s not well-tested, so it might not work consistently across browsers, and I’m afraid I don’t have the resources at the moment to solve such issues.

In my own study I took a different approach: all texts were pictures I made in photoshop. This offered me totally control in how the texts were presented