I am trying to create a custom component that loads custom fonts. If I load the fonts via the Dash app itself, i.e. add the necessary .css files with @font-face definitions and font files, it works. However, if I move the font definition CSS and the font file to a custom component, it no longer works. Has anyone tried to do something similar? Did you get it to work? How?
If I use fonts available online and use a link in the font definition (rather than bundling the font with the app/component), everything works just fint.
I tried both directly into the component, and via the index.css approach. In both cases, I am able to get the .css working (e.g. changing font color), but not the fonts.
I guess the problem lies somewhere in the url mapping and/or how the font files are served.
I dont’ see any errors on the console. I can also see from the files generated, that the font files are getting bundled with the Python code,
Yes, those were actually some of the guides that I consulted to get started. For the 3-way links I can’t use approaches 1&2, as the fonts are proprietary, so I am using approach 3.
I am using .woff files, but I wouldn’t expect the fileformat to matter. I have started from the TypeScript template. Besides this issue, it’s a great template. I am already considering to rewrite dash-leaflet with it - but that would take me some time…
Haha, yes, it looks like something went wrong with the cookie cutter . I tried cloning your repo, setting up the Python env, installing packages via npm, and running the example. However, it doesn’t seem to work for me,
That might be. I can see you includedsrc: local('Comfortaa') in the font definition, I think that will cause a load from your local system, if the font exists. Could you try without that part (and/or try with another font)?
So, I got somewhere, I’m thinking you need to add the routing in the _init_.py for the path that is trying to load. Since this doesn’t happen automatically.
I could get it to show the path was working, but was getting an error for it not being able to decode the downloaded font. Which means that the font was transmitted in a format that was unexpected or the file wasn’t loaded at all and I just made the path work. Haha.