Embedding Font not working on PC only MAC

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

Hello,

For some reason my Font only works on my Mac and not a PC. I have placed all the eot, woff, tff and svg font files in my resources folder. This font I am usings a my companies font, what am I doing wrong?

Thanks,

Simone

2

Can you share your file as a Zip file and let us know what browsers you’re seeing issues in? Are you seeing issues only when testing locally or from a URL?

3

Font.zip (106.0 KB)

4

I don’t really understand what is happening when you embed a custom font with Hype (no offense tumult, but this is a point of improvement), so I do it the old fashion way, with css and saving the fonts files in the lib. http://stage.vdcrea.com/tumult/wordly-with-css.hype.zip

5

Many ways to add a font in Hype – here’s the workflow we recommend: How do I add SF UI Display + Text fonts to prototype for IOS9? (San Francisco Mac System Font)

6

Thanks Daniel, I see how it is, and understand it is the way to make the font available in the font list of Hype UI. But perhaps, uploading the css and all font files generated by fontsquirrel is easier: no need to rewrite the path to the font files. Also most of front end designers will prefer to have a css rather than a < style > in the head.

How I see it: a field for each font filetype, the same way we have a field to upload different media formats (mp3/ogg/wav) in the resource folder. It is the difference of management of external resources I found strange for the fonts. When I click the + sign at the bottom of the resources, I expect to save a file in the lib, not to modify the head. My two cents.