Export font in specific folder

Exporting & Previewing
1

Hi guys,

i want to export custom fonts in specific folder “fonts” and used as a start the “OrganizedAssets.hype-export.py” script. I added a new entry:

elif args.replace_url.lower().endswith(('.eot', '.ttf', '.woff', '.woff2')):
url_info['url'] = "fonts/" + args.replace_url

It worked and all fonts are in the font-folder. BUT the pathes in the html head and in the
generated script file points on the root “./”:

@font-face {
    font-family: 'AkzidenzGroteskStd-Regular';
    src: url('./AkzidenzGroteskStd-Regular.eot');
    src: url('./AkzidenzGroteskStd-Regular.eot?#iefix') format('embedded-opentype'),
        url('./AkzidenzGroteskStd-Regular.woff2') format('woff2'),
        url('./AkzidenzGroteskStd-Regular.woff') format('woff'),
        url('./AkzidenzGroteskStd-Regular.ttf') format('truetype'),
        url('./AkzidenzGroteskStd-Regular.svg#AkzidenzGroteskStd-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

...url('./AkzidenzGroteskStd-Regular.woff') format('woff'),\n        url('./AkzidenzGroteskStd-Regular.ttf') format('truetype'),\n ... and so on.

thank you for help!

1 Like
2

Ahh that’s a great question. @jonathan how would I set this up in my py script?

3

The ${resourcesFolderName} magic variable I assume that is being used in the fonts isn’t compatible with the OrganizedAssets export script, as there is no longer a single resources folder.

In the font, you should reference them explicitly relative to the HTML, like:

url('fonts/AkzidenzGroteskStd-Regular.woff2') format('woff2'),

However this does mean that they won’t be able to be previewed in Hype since there’s no “fonts” folder relative to Hype’s preview.

We acknowledge this as an area for future improvement in the app, as more export scripts are being used which may relocate resources.

4

Can I just source the font without having to add fonts into the resources and hype use in its interface.

5

Hi Jonathan,

thank you very much for the answer! It’s right that I use this variable. I will then manually adjust the paths.

Then I will wait for the further development of Hype. It’s a great app!

6

You can add both paths to the font. Did a quick test and it works in both Preview and Organised Asset export

<style>
   @font-face {
    font-family: 'audiowideregular';
    src: url('${resourcesFolderName}/audiowide-regular-webfont.woff2') format('woff2'),
         url('${resourcesFolderName}/audiowide-regular-webfont.woff') format('woff'),
         url('./fonts/audiowide-regular-webfont.woff') format('woff'),
         url('./fonts/audiowide-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}
</style>
2 Likes
7

That approach will functionally work, but note that it will cause an extra network request resulting in a 404 and error in the console.

1 Like
8

Shame you cannot use an OR operator in the css for the font.

Maybe need to have a look at how fonts cascade when a font is not found.

9

We would need some template tags. I once suggested something similar to conditional comments. Would also be very cool for plugins…

Background on the syntax:

1 Like
10

I try re-ordering the fonts to put the fonts/ one first and that unfortunately did not alter the request attempt in Safari.