Add fonts to Organized Assets Export

Exporting & Previewing
1

Oi oi Hypers!
I updated the Organized Assets Export Script to include a fonts folder. That part works but it breaks the font link. I can update it manually in the font css file but is there a way to add this to the script incase I want to do a standard export also without changing the css url back?

Cheers!!

2

If you are already in the exporter you probably can use the exporter script callback that handles the assets and open the CSS file path search/replace in the file content. Just a stab into the dark. Extended weekend in Germany. When I recall correctly the Organized Assets has a function that sorts by filetype and name. That’s the hook I was considering as a solution as it has the file reference.

3

It can be done, but there’s not a good way to do this. To elaborate on the problem (as what I assume is what you’re hitting):

  • A CSS Font will define in its head html code a @font-face to have src properties that reference the ${resourcesFolderName} magic variable.
  • The Organized Assets Export Script no longer has a single .hyperesources folder; instead assets are placed in a variety of different folders
  • As such, the notion of a single ${resourcesFolderName} loses its meaning (it becomes “.”), and the src URL is now incorrect since it isn’t pointing in the right spot.

As it looks like you discovered, you can of course fix this by adding the correct path for the CSS Font (ex: "${resourcesFolderName}/fonts/myfont.tff"), but you can’t really have it work both ways since either it should use the fonts folder or the .hyperesources folder.

So the only (bad) solution I think is to do some sort of regular expression search within the generated HTML and JS files to match and clean it up.

I would like to have some sort of solution for this in the future; probably a separate syntax that would let you put in a resource file and it will expand to the appropriate path.

2 Likes