Working with Text Properties in Edge Animate

The Text Subpanel

The Text subpanel of the Properties panel appears when you have a text element selected. The settings here represent CSS style changes you can make to the text on your web page.

At the very top are the settings for font-style (preferred font followed by a few fallbacks), font-size, and color.

The next row allows you to define font-weight (e.g. normal or bold), font-style (such as italics), and text-decoration (such as underline).

The third row allows you to set text-align: left, center, or right.

This little icon lets you expand the subpanel to reveal four advanced settings.

The first advanced setting is letter-spacing: how tight or far apart the individual letters within words will be.

The second setting is line-height: the distance between baselines in multi-line text block.

The third setting is word-spacing: the distance between words.

The last setting is text-indent: the distance to indent the first line in a paragraph.

Creating the Text Box

There is a difference between clicking on the stage with the Text tool to add new text, and clicking-and-dragging out a text box.

If you simply click, the right edge of your text is undefined, so Edge Animate will assume you want it to run to the right edge of the stage.

Adobe Edge Animate Text

If you start by clicking-and-dragging to define your text area, the right edge will be defined and your text will wrap where you want it to.

Adobe Edge Animate Text

Using Google Fonts in Edge Animate

Google has hundreds of web fonts available to use for free on any website. The Google Fonts site has an easy-to-use interface that makes selecting and implementing the fonts on your site reasonably easy.

Start with a new project in Edge Animate. Save your file as index.html into a folder called google-fonts.

  1. Go to Google Fonts.
Using Google Fonts

Cruise around a bit and find a font you like. There are a number of ways to filter the fonts. You can also type in a word or phrase to preview.

Using Google Fonts
  1. Once you find a font you want to use, click on the Quick Use icon. You’ll find it in the center of three small buttons to the right of the blue Add to Collection button (it has a right-pointing arrow).
Using Google Fonts

The Quick Use page lets you make some style choices, and grab any code you need.

Using Google Fonts
  1. Scroll down to step 3 (Add this code to your website).
  2. Click on the JavaScript tab.
  3. Highlight and copy the script inside the box. Leave this page open in the browser.
Using Google Fonts
  1. In Edge Animate, with a project open, go to the Library panel and view the Fonts subpanel within it.
Adobe Edge Animate Text
  1. Click the Plus icon (+) on the Fonts bar to add a new font to your project.
Adobe Edge Animate Text

In the Add Web Font dialog box there are two text boxes (if you are using Creative Cloud, you’ll need to click the Custom tab first).

Adobe Edge Animate Text
  1. Paste the script you copied to your clipboard into the second box, Embed Code.
Adobe Edge Animate Text
  1. Return to the Google Fonts page you left open in the browser.
  2. Scroll down to Step 4, Integrate the fonts into your CSS.
Using Google Fonts
  1. Select and copy just the font names (not the part that says font-family: or the semicolon at the end of the line. Do include the quotes.)
Using Google Fonts
  1. Back in Edge Animate, paste the new line of code into the Font Fallback List textbox of the Add Web Font dialog box.
Adobe Edge Animate Text
  1. Click Add Font. You should see your font visible in the Library panel now.
Adobe Edge Animate Text
  1. Type some text on your page.
Adobe Edge Animate Text
  1. With the text element selected, assign your new font to it using the Text dropdown menu in the Properties panel. Adjust the size, color, etc. as desired.
Adobe Edge Animate Text Adobe Edge Animate Text
  1. Try this again with a second Google font applied to a second text element on your index.html web page.
Adobe Edge Animate Text
  1. Click the gray pasteboard area outside the stage, to select all.
  2. In the Properties panel, add a page title of Google Fonts.
Adobe Edge Animate - Google Fonts
  1. Save the file and preview it in a browser.

Using Edge Fonts in Edge Animate

If you happen to be subscribed to Adobe’s Creative Cloud service, you have an even bigger access to web fonts. When you add a font from the Library panel, you’ll get an Edge Web Fonts tab full of fonts.

Adobe Edge Animate Text - Edge Web Fonts

You don’t need to paste any code for these fonts. Just search, select, and click Add Font.