Embed fonts in HTML export

I had the same problem and finally exported all the slides as jpg, make the presentation again in keynote, added the videos it contained and exportes to html. Everything perfect this way... just uncomfortable...

I'm exporting a Keynote presentation as HTML and want to embed web-safe fonts into the final product

use "web safe" fonts in the Keynote presentation.

can I alter the HTML code itself?

Keynote has no HTML tools available for the user, you would use a web authoring application to do this.

I want to use a non-standard web-safe font - one I've purchased

Wat happens when you use these fonts in Keynote and what happens when you export to HTML, does it work?

I'm just ignorant on how I'd go about adding code to allow for these fonts.

If you need to go this route, you will need to understand basic html authoring. I deliberately keep away from this subject so I can't offer help, this is a topic out with this forums subject area, so I can only suggest using the help available from the developer of your web authoring application or google search the subject. Information about web authoring is prolific on the web.

As I thought, I can only suggest reading up on the bits of html authoring you would need to know to accomplish this.

Good luck

Hi,

have you found a solution meanwhile? I try to export an animated presentation as HTML which also includes custom fonts (fontawesome).

So far I can see the objects are exported as svg-files. As a matter of fact it makes no sense to include the font manually in the html file, as far I know.

Did you found a workaround?

Thanks for your reply.

Greetings.

Christopher

have you found a solution meanwhile?

The solution is to use an html authoring application as suggested in September last year.

the objects are exported as svg-files. As a matter of fact it makes no sense to include the font manually in the html file, as far I know.

That is correct, as with all exports from Keynote, the fonts can not travel with the exported files, html relies on the fonts on the recipients system. If a font used in the exported html is not installed it will be substituted.

When you want to display a particular font in an exported presentation, use a font that you know is installed on the recipients system.

Erin,

The only way that you can distribute that Keystone presentation in HTML using your custom font is:

1. On physical, removeable media with the font in a directory known by the HTML/CSS, or on a hosted web server.
2. Use web-hosted fonts that you reference in your HTML code, and will dynamically load when your HTML presentation is opened in a user's browser. You must use the available fonts, not your local font.

Choice 1 is impractical, and the HTML code must be coded with the physical font location. Choice 2 is what you want, and you can use TypeKit or Google Font API to achieve it. You would need to find a font face that can replace your current downloaded choice. Two Font services are listed, and others may be found via a Google search of Font API.

Google Font API (free)

Adobe Typekit (fee)

Hi,

thank you for your replies. So than my approach wasn't that incorrect but I guess I did something wrong. I tried to embed the font into the assets/player/KeynoteDHTMLPlayer.html via CND-source but that didn't work.

Have you done that workaround once successfully and maybe have a hint for me where I have to add the custom font to get it working properly?

Thank you for your time and help.

Greetings

Christopher

Reiterating what I posted previously. That Google API link shows how to reference their web-based fonts within your HTML/CSS — but not your custom font. There is a very real possibility that you can trash your exported Keynote HTML content, and considering the potential lost time, it may be better to not edit the HTML afterall.

I ended up putting the .otf file of the font inside the /assets/player directory of my HTML Keynote.

After that I made sure that all onscreen elements where rendered using my font by inserting some CSS in KeynoteDHTMLPlayer.html (which is also in the /assets/player directory) and I've tested it in Chrome, IE, Firefox and Safari, works on all of them:

<style>

@font-face{

font-family: MyFont;

src: url("My-Font.otf")format("opentype");

}

* {

font-family: MyFont !important;

}

</style>