In the past, you could choose one font family from a set of three pre-defined font families that contain at least one font that is built in to most systems:
- Verdana, Arial, Helvetica, Sans Serif
- Times New Roman, Times, Serif
- Courier
These could only be selected at the global level and all text would be in these fonts using fonts found on the viewer's computer. If you wanted, Verdana and Times New Roman fonts could be embedded in the SWF File to give full control over these fonts and not rely on the viewer's computer. However, your choice was limited to only these fonts.
In addition to these three standard font families, you can now define up to 3 custom font-family strings, and use these custom font families at both the global, control bar, captions, and interaction-item level. This lets you choose from up to 6 different font families (3 predefined, plus 3 custom), individually, for most text strings displayed in the IMO.
To ensure fonts you define are available on the viewer's system, you can upload font files that will be embedded in compiled flash IMOs and will be included as linked assets for HTML5 deployments (using the CSS @font-face rule).
Simple Example - Two Custom Fonts
http://www.clicflic.com/st/d.xhtml?a=9bW6eeSHojU*&r=0.1962474931232232&s=thax
How To Do It
Custom Font Families are defined in IMO -> Main Settings -> Format Settings. You define custom font families the same way you define them in CSS, such as "Calibri, 'New Century Schoolbook', 'Tahoma'. Define one in each of the 'Custom Font Family' text boxes. When you save, these families will show up in the font family selector pull-down menu that appears everywhere you can select a font for a text string such as an interaction item.
The IMO -> Main Settings -> Format Settings area is also where you can upload font files and provide descriptive information for these uploaded files, such as Font Family name, Font Weight, etc. .When uploading Font Files, keep in mind that different font files are needed for Flash and for different web browsers (HTML5).
The following fonts are compatible with Flash:
- TrueType fonts (*.ttf);
- OpenType fonts (*.otf);
- TTF - Works in most browsers except IE and iPhone.
- EOT - IE only.
- WOFF - Compressed, emerging standard.
- SVG - iPhone/iPad.
To create an IMO that only works in flash, you only need one file for each font - ttf or otf.
To create an IMO that works across virtually all HTML browsers, you need four files, one of each listed above.
Step 1: Collect your font files.
The best way to get font files in the formats you want is to use font squirrel. You can upload your own fonts or use fonts they make available, then they will create that font in all the files you need and give you sample CSS code that will come in very handy when you are configuring on ClicFlic.
The following file types are allowed: .ttf, .otf, .svg, .woff, and .eot
You can embed any number of font files, but remember that it will increase your SWF file size.
Step 2: Upload your font files.
You can upload as many font files as you need to in the IMO Main Settings -> Format Settings.
Note that the system will make your font files all lowercase on the system. So keep this in mind for the next step.
Step 3: Configure your uploaded fonts on ClicFlic
The most challenging thing about embedding a font is creating the embedded font info string in Main Settings -> Format Settings. There are three slots and you can use any of them. The format is:
Name;Family;Weight;Style;Filename1;Filename2;Filename3;Filename4;Filename5; ... ..repeat ...
- Name is not used, it's just a nice way to name your font.
- Family is very important. This is the name of the font family that will be used by both Flash and HTML5 browsers. When you define custom fonts in the next step, you will need to use the family name here. If you are using font squirrel, use value they provide here, because the SVG font format, required for ipads, requires this as an input and is compiled with it up front. If you change the family name provided by font squirrel, the svg file may not work.
- Weight is usually "normal" unless this is a bold version, then set it to "bold"
- Style is usually "normal" unless this is an italic version, then set it to "italic"
- Each filename is listed here next. Be sure to place the flash-compatible file in the filename1 slot. The others can go in any slot.
If you have three versions of a font - say normal, bold, and italic, you should repeat the process above on the same line. The Family name should stay the same for all versions, but the weight, style, and filenames will change.
Finally, always include ALL the semicolons in each line, even if there is nothing to put in the slot.
An example for the Broadway font used in the example IMO is:
Broadway;broadwayreg;;;broadway-webfont.ttf;broadway-webfont.eot;broadway-webfont.woff;broadway-webfont.svg;;;
Step 4: Add your embedded fonts to the Custom Font Family slots on ClicFlic
To use a font you've configured, you need to place it in one of the Custom Font Family slots. To do this, you write font family strings the same way you do in CSS. That is, the highest priority font is on the left, then lower priority, fallback fonts appear to the right, separated by commas.
Example Custom Font Family: broadway, Arial, Helvetica, Sans Serif
This Family String says to the IMO: look for Verdana, if not found, look for Arial, if not found, look for Helvetica, etc.
So, you should place your embedded font family name first in this list, then use an appropriate fallback.
Note that font families that have spaces or that begin with a number should be enclosed in single quotes:
'Times New Roman', Arial, Helvetica, Sans Serif
or
'20DB_Regular', Arial, Helvetica
This is very important.
Bold & Italic Text with Custom Fonts
Bold and Italic text present several problems for custom fonts, including different treatment within Flash and HTML5. As a result, the IMOs behave as follows, for custom fonts only:
Flash: Except in preview mode (within the authoring system), the bold and italic checkboxes are ignored for custom fonts.
HTML5: the bold and italic checkboxes are ignored for custom fonts.
Explanation:
The bold and italic checkboxes do not work in flash for embedded fonts. Within the authoring system, however, in preview mode, the fonts are not embedded and are 'pulled' from the author's computer, so the checkboxes do work there which makes it possible to position text exactly within interactions.
In HTML5, web browsers will try to embolden or italicize a custom font in their own way, which messes up the positioning and dimensions calculations. this can easily cause unintended results, like extra line breaks in buttons that you didn't want. So, for custom fonts, these settings are ignored.
Best Practice:
1. Treat bold or italic versions of a custom font as a separate custom font. Yes, you only get to define three custom fonts. So you have to be strategic.
2. If a font is bold or italic, check the checkboxes in the authoring system when using it, to ensure that preview modes and positioners work correctly. When defining the font in a custom font slot, always follow its bold name with its non-bold name, delimited by a comma.
3. Make sure the custom font is installed on your computer (authors computer) so that you can see what it will look like in preview or positioning mode.
So, if you have FONTA and want a bold version of FONTA, you must allocate two custom font slots, such as:
1. FONTA
2. FONTABOLD, FONTA
Next, upload the FONTA and FONTABOLD font files.
Next, when using FONTABOLD, check the bold checkboxes in the authoring system. Since the fonts are not embedded in flash in preview or positioner mode, the IMO look to the host system for the font, which must be installed on the author's computer to work properly. It will probably find FONTA and then make it bold because the checkbox is checked. It does not do this when the font is embedded (ie IMO is deployed and accessed outside of the authoring system).
Be Careful
Embedding font files is an advanced topic. Flash, and different HTML web browsers use different file types and these must be included here. Please consult ClicFlic for assistance before entering anything here. Note also that a name entered here must also be entered as the first font in a Custom Font Family, above for it to be useful.
Other notes:
1. Unless an uploaded font is installed on your system and uses the same exact family name, the Flash Preview and Interaction Previews and Positioners which are both Flash, will not show text in the correct font. HTML5 Preview should show the fonts if they are configured correctly. This means you should install any fonts you upload on your own system for authoring. Only compiled flash IMO objects will show the fonts.
Here's some useful information on troubleshooting Font problems on HTML5:
No comments:
Post a Comment