Embedded fonts not rendering or working on Safari, Firefox and IE

1

The embedded fonts UI used are not rendering or working on Safari, Firefox, and IE. Some of the fonts work in Chrome, but not all of them.

I have read your documentation, checked paths on the CSS code, etc., and nothing.

Here is the link: https://awmsdcropreport.com/

Please, I will appreciate your HELP!!!

Ariel

2

It looks like you're embedding in Wordpress but not including the 'head' of your Hype document which contains your font references. You could either edit your theme's CSS to add the font-face(s) or embed your Hype document using the iframe method which includes your fonts.

Unfortunately this 'div' default method of embedding Hype documents does not include external font references.

3

I tried embedding the document, but I got the same results. I am using a Child theme. ¿should I include the fonts CSS on the CHild or both themes?

4

Anywhere, as long as it is on the page where your Hype document is loaded. I like the ‘wp code’ plugin for adding additional code to pages (or specific posts)

5

Ok. I'll try this suggestion.

6

I tried your suggestions, and they are still not working.

Can you help me if I send you the file and access to our WordPress site? I can pay a fee if necessary.

7

Adding Fonts in Hype with WordPress

When using Tumult Hype on WordPress, the Hype plugin does not include the Head HTML content (only in the iFrame, which presents its own challenges); it only embeds the Hype runtime and animations. This makes managing additional resources, such as fonts, slightly trickier, especially if you're using local fonts stored in the Hype resource folder. Here’s how you can handle it.

Local Fonts in Hype

If you’re using local fonts stored in your Hype resource folder (e.g., ${resourcesFolderName}/fonts/myFont.woff2), you can dynamically inject them using JavaScript and the Hype API. Since the WordPress plugin automatically resolves ${resourcesFolderName} during export, you can rely on that.

Here’s a function to add fonts dynamically within your Hype document:

hypeDocument.add2head = function(content) {
  var resolvedContent = content.replace(/\$\{resourcesFolderName\}/g, hypeDocument.resourcesFolderURL());
  var head = document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.innerHTML = resolvedContent;
  head.appendChild(style);
};

To inject a font, you can use this in your first scene’s On Scene Load action:

var fontCSS = `
@font-face {
  font-family: 'MyFont';
  src: url('${resourcesFolderName}/fonts/myFont.woff2') format('woff2');
}
`;
hypeDocument.add2head(fontCSS);

Where to Add This?

Since the head.html file isn’t included with the WordPress plugin, you can’t rely on HypeDocumentLoad. Instead, add the font injection logic in the first scene of your animation.By the way, it would be great if Hype had a built-in Hype Document Load event.

If you want a smooth experience, consider creating a brief "preloader" scene that runs the font injection, then transitions to your main content once the font is ready. For example:

  1. Create a Preloader Scene: A blank scene with a loading indicator.
  2. On Scene Load: Add the font injection code above.
  3. Transition to Main Scene: Use a timeline or JavaScript to move to the next scene after a short delay.

I hope this helps.

1 Like