Linking to a css file

I cannot find the answer to this on the forum. Sorry if it has been answered already.

I need to add a font to my project that will work for offline viewing (so no google fonts.) I have the css file in the head and the font in my resource folder. The style does not display in the Hype window. I’m attaching screenshots. Does anyone know what I am doing incorrectly? Thanks.

I’m guessing you need to also add the ${resourcesFolderName}/… reference to each of your url’s inside the @font-face declaration. As at the moment the .css file is being called from outside your project (within the head) and is looking for the files in the root (relative). So just add the resources folder variable in front of each url to the webfonts.

src: url('${resourcesFolderName}/shortstack-regular-webfont.eot');

for example.

Here’s our documentation for adding fonts:

You’re taking a different approach, which is fine, but Hype doesn’t know about this font-family in the font selection area since you didn’t use the Custom Font workflow.

As is, you would be able to use this font if you set a class or ID on an element, and used this format within the inner HTML of an element:

<p style="font-family: 'shortstack-regular', sans-serif">shortstack</p>

Since your CSS file is in your resources library, it is correctly referencing the files you have in there, but you’re missing out on font selection (which you can get by following the Custom font addition workflow in the docs).

My bad. I did say it was a guess though. :slight_smile:

1 Like

Thanks for the reply. I followed the custom font install instructions but it is still not working for me.
I’ve added the style tag to the @font-face in CSS stylesheet

I added the font through the text inspector

Font does appears in head (actually twice as the first resource appeared when I added the font into the resource library)

The font appears in the font choices but it does not display. I have chosen “shortstack” from the font selector (not what I really want to do) and inside the html code (optimal way so font is consistent between multiple Hype files) and the font does not display.

Following your example I hand coded a paragraph (using “noteworthy” as the secondary font) and the preferred “shortstack” font did not display, but the secondary font did.

Can you see what I’ve done wrong? The purpose of having a style sheet is so multiple Hype projects can share the same css file so all will be consistent. Thank you. Thank you!

Totally. Shouldn’t this and your font files be in a static location on the web?

Your CSS file is already in your resources library, as are the fonts you have, so if you won’t need the ${resourcesFolderName}/ variable.

When you add the font in the text inspector, you don’t need to place anything in the ‘Embedded Head HTML’. Your ‘font-family’ value looks correct. You may not see your font in the preview, but it should work once you choose that font in your Hype doc

As long as you have 'Include in document <head> checked for your CSS file, you will have the CSS you wrote available to your document. (But as I mentioned earlier this would be better called as a single line referencing the full URL to your CSS file in your Head).

It would be really great if you could post the Hype document so I can dig into this – screenshots are tricky to troubleshoot.

HI Daniel. The Hype file will be going into an .iba file and the font needs to be accessible without internet (235.3 KB)
Attaching the Hype file. The css file won’t upload, but it can be seen in the screenshot.