Text Not Displaying Correctly

[topasnaa]

Hi Jeremy,

I am helping a group on their project and they seem to be having an issue displaying text correctly. They want the words in their study to display an ambiguous letter between a b and a p. For some reason, the text is delaying random numbers instead. They think this might be an issue with their file type for the front (.oft) but they are not sure.

Here is the link to the experiment
https://farm.pcibex.net/r/VuRsKS/

Thank you,
Ana

[Jeremy]

Hi Ana,

The numbers are not random, they match exactly the text from the table’s token column, eg:

3eak,beak-peak_1_VOT_1.wav,438
5eak,beak_peak_2_VOT_2.wav,438

Using a custom font is more involved than just uploading a font file to a project’s Resources folder. It requires using the @font-face CSS rule to fetch the font file. The PCIbex Farm won’t allow background access to the font file, it will result in a CORS error (you can, however, download it manually by directly entering the URL in the address bar, but that’s of no help here)

My suggestion is to upload the font file on a domain that won’t throw a CORS error and insert this in the project’s global_main.css file under the Aesthetics folder:

@font-face {
    font-family: "Arial Modified";
    src: url("https://url.toward.the/font.otf") format("opentype");
}
.PennController-wordtoken {
    font-family: "Arial Modified";
}

I should note, however, that the Arial font is not under an open license, which means you cannot modify it legally

Jeremy

[nasimbhmn]

Hi Jeremy,

I have a problem with changing the font via CSS. I was able to use google API fonts in the original Ibexfarm, but now in PCIbex, neither @import nor @font-face really works.
Here is the demo of a sample script. Could you please help me resolve the issue?
https://farm.pcibex.net/r/pfEfgV/

FYI, in this demo, I have added the font to the global_z.css, but I even tried revising the original global_main.css and nothing changed.

Thanks and best, Nasim

[Jeremy]

Hi Nasim,

Not sure why the @import rule doesn’t work, but I don’t think using url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap") as the src attribute in @font-face is valid anyway

However, if I visit that URL and copy-paste the raw CSS rules back in global_z.css in place of the @font-face rule you currently have, I do see the Google font when I open the experiment

Jeremy

[nasimbhmn]

ahh, you’re right, it works perfectly when I use the font-face rules directly in the CSS file.
Many thanks.

[Author]

Posts