Join Chris Converse for an in-depth discussion in this video Using fonts from Adobe Typekit, part of Edge Animate Essential Training.
So, in order to get these two pieces of information, we need to switch over to Typekit and add a font into one of our kits. So, inside of Typekit on the main screen here, we can search for fonts by selecting different categories. So, Handwriting, for example, will show me all of the handwriting fonts. Now, I want to use a font called Providence, so I'll just start typing that in the search field. So here it is, FF Providence Sans Web Pro. So I'll click on this and get more information about the font. So here I can see a preview. If I like the font, I can come over here and click "use this font". This popup wants to know how I would like to use this font.
Let's come in here, select these two lines. Let's choose Copy, let's switch back over to Edge Animate, and inside of the Embed Code area, let's paste those two lines. Now we'll switch back to Typekit. Let's close the Embed Code settings, and over here on the left-hand side, here's the name of the font, and there's a link under here that says Using Fonts in CSS. Let's click this link, and in here is where Typekit will show us the CSS names we need to use in our CSS file, and in this case, we need to use these for the font name inside of Edge Animate. So, we'll come over here and select this name, choose Copy.
Let's switch back over to Edge Animate, and inside of the Font Fallback List, let's paste in that name. Now, this is a Fallback List, so we could put a comma, and then put in Arial for example, so if for some reason, this font doesn't load, we get this font instead. And then let's come down here and choose Add Font. So now we can see the font shows up in our fonts listing. This is being hooked in from Typekit. Let's select the text block that says "Come Visit Us". The Properties panel, let's go under Text, and let's choose that font we just added. So, now we can see on the stage that Edge Animate is able to connect to the Adobe Typekit server, load in the font, and then allow us to assign that font to any text element on the stage, and then I'll select a second text block, and assign a font into here as well.
Now, just like we did earlier, we can open up some extra type properties. So, we can come in here and change the size. We can change the line spacing, and use these formatting tools to get the font to look exactly the way we want inside of our composition. And now the process for removing a font is as simple as coming over to the Library panel, right-clicking on a font, and choosing Delete. Once we do that, Edge Animate is no longer linking to that third-party font, and you'll see that the text will default back to what we had before.
- 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