Join Chris Converse for an in-depth discussion in this video Using self-hosted fonts, part of Edge Animate Essential Training.
- View Offline
- Now since the Edge Animate stage really is a web browser, we can add custom CSS into the HTML file. And then Edge Animate will see that CSS and allow us to define custom font names with the font family. This will give us the ability to add self-hosted fonts into a composition without having a direct way to do it completely in the interface. So let's switch over to our Working Directory. And in this Working Directory for our self-hosted files, let's come in here and create a new folder called Fonts. And then inside of the Fonts folder inside of the 00 Assets folder in the exercise files, I've downloaded a font called ArchitectsDaughter.ttf.
I'm gonna hold Option or Alt key in Windows, and drag a copy of this into our project. Now I downloaded this font from Font Squirrel. It's 100 percent commercial free font that you can use on any website. And once you have this font in your project, let's come down to the self_hosted.html file. And let's open this up in a Text Editor. Now I'll be opening this file inside of Edge Code. You can download Edge Code as part of your Creative Cloud membership. Now in this HTML file, I can see a beginning Adobe Edge Runtime and an ending Adobe Edge Runtime. Anything inside of these comments will be changed inside of Edge Animate the next time you save your file.
But anything you do outside of these comments, Edge Animate won't change that. So what we're gonna do down here in CSS is define a font family, and we're gonna set the source equal to a font file on our hard drive. Now I've already set this up into a snippet. So in the exercise files if you go into the Assets folder into Snippets, there's a file called css_font_face. So inside of here, we're gonna select all of this content. Let's come up to the Edit menu and choose Copy. Let's switch back to self_hosted.html. And then after the Edge Animate comments, let's Paste all that.
So basically what happens here is we use the @font-face. We have a font family. This is a name we can makeup. I don't have to use the name ArchitectsDaughter. I can choose anything I want here. And then under source, we're pointing to that fonts directory and then the actual fonts file. So let's go back to our Working Directory, and lets copy that exact file name. So inside of the Fonts folder, I'll come in here, select all of this, copy that to the Clipboard. Go back to Edge Code. Let's replace fontfile.ext with the actual name of that file.
And all we need to do here is tell Edge Animate the name of that font. So let's come over here, click Add Font, toggle this open. We can see that the new font's been defined. Let's select one of our text blocks. In the Properties Panel, let's come down and choose chalkboard. Then I'll do the same thing for the second text block. And then just like any other workflow for adding fonts to our compositions, we can come in here to the Properties, change the font size, change the leading. And do any other styling that we like. All the while, Edge Animate is loading that custom font from our hard drive.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications