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.
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.
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.
- Go to 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.
- 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).
The Quick Use page lets you make some style choices, and grab any code you need.
- Scroll down to step 3 (Add this code to your website).
- Highlight and copy the script inside the box. Leave this page open in the browser.
- In Edge Animate, with a project open, go to the Library panel and view the Fonts subpanel within it.
- Click the Plus icon (+) on the Fonts bar to add a new font to your project.
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).
- Paste the script you copied to your clipboard into the second box, Embed Code.
- Return to the Google Fonts page you left open in the browser.
- Scroll down to Step 4, Integrate the fonts into your CSS.
- 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.)
- Back in Edge Animate, paste the new line of code into the Font Fallback List textbox of the Add Web Font dialog box.
- Click Add Font. You should see your font visible in the Library panel now.
- Type some text on your page.
- 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.
- Try this again with a second Google font applied to a second text element on your index.html web page.
- Click the gray pasteboard area outside the stage, to select all.
- In the Properties panel, add a page title of Google Fonts.
- 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.
You don’t need to paste any code for these fonts. Just search, select, and click Add Font.