Custom Font Not Showing In Preview

Elements Typography
1

Hi,
Is it possible to view the imported custom font in preview? The font import is done using the guidelines present in the official documentation e.g.:

<style>
@font-face {
    font-family: 'FuturaTOTBold';
    src: url('${resourcesFolderName}/futuratot-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('${resourcesFolderName}/futuratot-bol-webfont.woff') format('woff'),
         url('${resourcesFolderName}/futuratot-bol-webfont.ttf') format('truetype'),
         url('${resourcesFolderName}/futuratot-bol-webfont.svg#FuturaTOTBold') format('svg');
}
</style>

The fonts are shown/rendered correctly in Hype as well as when exporting to a folder and then viewing in browser. However, when previewing, the fonts are not loaded (404). Is there a way to make the fonts work in the preview, so we do not need to export each time when developing?
Thanks!

2

Can you double check that these font files are being uploaded to your server? If you're getting a 404 error it means the file is not found. So if it works when previewing (locally) but not when previewing (on a server) then the upload process might have failed. If you can share a URL where you're seeing this that would be helpful.

3

I was not clear in the first post. It indeed works when uploading the exported folder to a server. But when clicking the "Preview" button in Hype it opens in the selected browser without showing the correct font. (when using the developer tools in the browser, after pressing the "Preview" button in Hype, i can see that the fonts are not loaded correctly (404)). So my question is, how can I use the "Preview" button in Hype and see the correct fonts without the need to export each time the project to a folder and upload it to a server (local or remote).

4

That's odd -- typically this breaks in the 'get it in a server' step. If you can share a simplified example of the font not working that would be super helpful. The code you used looks correct to me.

5

Ok I found what was wrong. The font resources (with the green icon) were all there (with the correct @font-face code), but the font files were not present in the resources panel. I added all the necessary font files in the resource panel and it works. Thanks for the help. I thought that the font resources contained the font files...

6

Glad to hear you're all set!