Add more fonts… Custom CSS… not working in any browser/iOS device

For each font weight, I have added code like this in the “Add more fonts/Custom CSS” dialogue:

See screen dump below.

@font-face { font-family: 'Soleil'; src: url('${resourcesFolderName}/Soleil_Regular.eot'); /* IE9 Compat Modes */ url('${resourcesFolderName}/Soleil_Regular.woff') format('woff'), /* Modern Browsers */ url('${resourcesFolderName}/Soleil_Regular.ttf') format('truetype'); /* Safari, Android, iOS */ font-style: normal; font-weight: 400; }

With the example above, ‘Display name’ is set to ‘Soleil Regular’, ‘CSS Font Family’ to ‘Soleil’.

Texts are not showing up with this font.

Firefox console error example:

Expected font descriptor but found ‘url(‘F.hyperesources/Soleil_Regular.woff’)’. Skipped to next declaration. index.html:24:6
downloadable font: rejected by sanitizer (font-family: “Soleil” style:normal weight:normal stretch:normal src index:0) source:

Safari console error example:

[Warning] Invalid CSS property declaration at: url(‘F.hyperesources/Soleil_Regular.woff’) (index.html, line 24)

Google Chrome; only the text set with regular displays. No messages in the console.

iPad; wrong font…

A semi colon / comma typo?
Anyone with a hint?
Done this many times before. Suddenly can’t make it work.

(Font license bought.)

I recommend using this format in your code:

When previewing locally, your document name is ‘index’, so if you have ‘F.hyperesources’ hardcoded, it won’t work when previewing unfortunately. You can see this in this error that the resources folder becomes index.hyperesources:

Well… when I posted this I happened to copy info from two different test files.

My Hype file for this case is named ‘F.hype’.

Check the attached Hype file.

I have removed the font files from the resource folder, as they are copyright protected.

It is not working in ‘Preview’, not working when run from the exported file, from the file system and not working when run from a web server… (22.6 KB)