How to load a webfont for a Flexx web app

[garvanwalshe]

Hi - I'm really enjoying Flexx and think it's an amazing framework that's saved me a lot of time for an app I'm making but I've run into a little obstacles.

I'm trying to use fontawesome icons without their CDN, but I'm having trouble loading the webfont.
The problem is that the browser need to request the webfont with a url, but I can't seem to work out how to tell the assets system where the webfont should be found.

(I tried directly including the url to the webfont in the css, and also writing some js which I executed explicitly but neither worked)

Is there a way to associate an asset (such as a webfont) with a url relative to my source files (eg: ../assets/webfonts/foo)? so that the server can serve the font to the browser?

Sorry if I've managed to miss where this is already explained in the assets docs!

many thanks

[Konubinix]

In that case, I relpace the urls on the fly to match the ones of flexx

I attached a working example
fontexample.zip

First, I add the font files as shared data.

for font in (fontawesome / "webfonts").iterdir():
    flx.assets.add_shared_data(
        font.name,
        font.read_bytes()
    )

Those will be available at /flexx/data/shared/

then, I load the css, replacing the relative path ../webfonts by the shared data urls

all_css = fontawesome / "css" / "all.css"
flx.assets.associate_asset(
    __name__,
    all_css.name,
    all_css.read_text().replace("../webfonts/", "/flexx/data/shared/"),
)

[garvanwalshe]

I've had to concentrate on other things, so sorry this thank you is so late! This was extremely helpful.