Unable to change "weight" property of variable fonts within Pavlovia

Online experiments
1

URL of experiment: kurtulusmertkucuk / flexFont_demo · GitLab

Description of the problem: We are trying to (i) display variable fonts within Pavlovia, (ii) change properties of these variable fonts. We have displayed Robot Flex successfully. However, we were not able to change the font’s “wght” property. A list of things we tried:

• Create style classes within html, adjust wght numerically within those, use these class names to change font’s wght. We’ve tried to (a) apply those styles with a range of different parameters of the text component and (b) also assign numeric values instead of style class names hoping that “wgth” parameter may register numerically. List of parameters we’ve tried:
- textcomponent._pixi._style._fontWeight
- textcomponent._pixi.context.fontVariantCaps
- textcomponent._textMetrics.style._fontWeight

Note: We’ve tried changing “needPixiUpdate” and “needUpdate” to true to see if this was related to a failure of updating. We’ve tried placing these expression both before and after the lines that change “wght” in a systematic manner, it was not helpful.

I hope someone familiar with this issue could help me understand how to manipulate parameters of variable fonts within Pavlovia.

Thanks!

2

We’ve managed to fix this issue by:

  1. Download Roboto Flex font from google fonts
  2. Go to font “fontgauntlet.com” and upload the google font.
    2a) adjust the desired parameters and download separate font files in .woff format for each combination.
    2b) add these fonts to your online resources from experiment settings > online
  3. Modify your index.html file and add @font-face{ } for each of the font files with DIFFERENT font-family names (check the project’s pavlovia.git for details and additional .js libraries involved).
  4. Use the font-family names you’ve designated within the text components.
  5. Good to go.
1 Like