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
petester
(Peter Borokhov)
February 19, 2020, 9:25pm
2
Ahh that’s a great question. @jonathan how would I set this up in my py script?
jonathan
(Jonathan Deutsch)
February 19, 2020, 11:30pm
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.
petester
(Peter Borokhov)
February 20, 2020, 12:39am
4
Can I just source the font without having to add fonts into the resources and hype use in its interface.
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!
MarkHunte
(Mark Hunte)
February 20, 2020, 12:40pm
6
jonathan:
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.
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
jonathan
(Jonathan Deutsch)
February 20, 2020, 10:08pm
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
MarkHunte
(Mark Hunte)
February 20, 2020, 10:35pm
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.
MaxZieb
(Loves Hype)
February 20, 2020, 10:50pm
9
We would need some template tags. I once suggested something similar to conditional comments. Would also be very cool for plugins…
I am not sure what your plans are for the long run, but for the immediate future I’d appreciate some Hype tags like IE had back in the days (and a fixed parser!). This might just be really great…
<!--[if HYPE]>
This is rendered in the Hype GUI but will be stripped in the exports
<![endif]-->
Other solutions? Ideas? Having extended Symbol Bundles package all this would even be better (including them having a portion running on HypeDocumentLoad).
Background on the syntax:
Conditional comments are conditional statements interpreted by Microsoft Internet Explorer versions 5 through 9 in HTML source code. Conditional comments can be used to provide and hide code to and from Internet Explorer. Conditional comments are no longer supported in IE10 and IE11.
Conditional comments in HTML first appeared in Microsoft's Internet Explorer 5 browser, although support has now been deprecated. In Internet Explorer 10, HTML conditional comments are not supported when the page is...
1 Like
jonathan
(Jonathan Deutsch)
February 20, 2020, 10:56pm
10
I try re-ordering the fonts to put the fonts/ one first and that unfortunately did not alter the request attempt in Safari.