search

ffd8 / P5LIVE

p5.js collaborative live-coding vj environment!
https://p5live.org
GNU General Public License v3.0
226 stars 35 forks source link

where can i upload different fonts #62

Closed sosunnyproject closed 3 years ago

sosunnyproject commented 3 years ago

hello, I'm enjoying p5 live and thanks so much for this amazing website! I tried to figure out how to upload new font files, but couldn't.

Based on typo examples, it seems like the code loads font files from this directory. font = loadFont("includes/demos-data/fonts/RobotoMono-Regular.otf"); Could someone help me how to find this directory and upload a file?

Thanks!

P.S. I know that I can also load google fonts as an alternative, but looking for direct upload, if possible. Thanks!

function googleFont(fontName) {
    let link = document.createElement("link");
    link.href = "https://fonts.googleapis.com/css?family=" + encodeURI(fontName) + '&display=swap';
    link.rel = "stylesheet";
    document.head.appendChild(link);
    return fontName;
}
ffd8 commented 3 years ago

@sosunnyproject – great question. If you're using P5LIVE a lot and working on a project just for you (not COCODING), then I highly suggest installing it as an offline server - either the quick python way or fancy with node/npm for enabling auto-backups. Export all sketches (or within settings, press backup now) and import into the offline version. When you have it offline, the folder comes with an empty /data folder, which I'd recommend to use, since if this repo is cloned, that folder will never be erased/overwritten with updates – don't store anything inside the /includes/ directory, since it may get overwritten with updates + cause github changes issues.

Then to load local files, you can be as messy/organized as you like, linking like so:

font = loadFont("data/fonts/someFont.otf");

If you need to access it 'online' (mainly for COCODING or sharing the script with someone else online) – then your best bet is finding a CORS friendly service to host it for you, ie. glitch.com. Create a basic 'static website' (always awake), then goto 'assets', drag + drop, click on file, copy that URL – then you can load that online hosted font file, will have a crazy long URL:

font = loadFont("url_to_file");

I'm sure there are some other great free places to store files/assets online (just tested with github, but couldn't access a font file in CORS free way... hmm works fine for obj and other text files).

ffd8 commented 3 years ago

Hope the answer above solved the issue (run locally using own folder ie /data or finding CORS friendly site to host it).