Font Library Creator

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
Line 10: Line 10:
While not necessary, the sample project files for this tutorial will be very helpful in following along and understanding all the different ways of working with the ''Font Library Creator''. Once downloaded and imported you'll see the three projects that are referenced in this tutorial.
While not necessary, the sample project files for this tutorial will be very helpful in following along and understanding all the different ways of working with the ''Font Library Creator''. Once downloaded and imported you'll see the three projects that are referenced in this tutorial.
[[File:015_001.png|center]]
[[File:015_001.png|center]]
 +
 +
=Embedding Via ActionScript Files=
 +
Let's start off with an error. This is actually a great way to start because solving it will give good insight to:
 +
 +
* How embedding, via metadata tags, work
 +
* Why using relative embed paths is useful
 +
* When using the Font Library Creator, embedding via .SWCs or .SWFs may be better
 +
 +
==Absolute Paths Are Evil==
 +
After importing the project, jump to your ''Run Configurations'' window (''Run>Run Configurations'') and you'll see all the run configurations associated with these projects [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:015_002.png]]. If you choose to run ''ASDemo - Single Font'' you'll most likely see this error:
 +
 +
<syntaxhighlight lang="bash">
 +
Could not create file /Users/OSX/_dev/fdt/EmbedFontsAS/bin/Single.swf.
 +
Build failed.
 +
</syntaxhighlight>
 +
 +
 +
This is because when I used the Font Library Creator tool, it embedded the fonts based on where they were located on my machine.  If you take a look at the took at the font ActionScript classes you'll see the embed code being used [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:015_003.png]]:
 +
 +
<syntaxhighlight lang="actionscript">
 +
[Embed(source="/Users/OSX/_dev/fdt/EmbedFontsAS/assets/Quicksand.otf"...
 +
</syntaxhighlight>
 +
 +
 +
When using the Font Library Creator Tool to create ActionScript font classes, it will locate the fonts on your computer and use that path to write the embed code. In order to get this example running, you'll need to adjust the path to it matches the location on your machine. Before going on let's fix that.
 +
 +
Locate ''Quicksand.ffl'' within the ''libs'' folder and double click on it. The window that opens in the Editor is the GUI for FDT's ''Font Library Creator'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:015_005.png]]. Once here, find the field for ''File Font'' and click the browse button:
 +
[[File:015_006.png|center]]
 +
=Wrap Up=
=Wrap Up=
FDT has many, many more features to be explored. Stay tuned for more tutorials!
FDT has many, many more features to be explored. Stay tuned for more tutorials!

Revision as of 00:41, 8 October 2010

Font intro.png

Fonts can be a real pain, especially when working with an application that uses multiple languages or requires localization. Once you do decide the best way to include fonts with your application, you may want to have control which glyphs or characters are included. Simply including ALL your fonts will unnecessarily bloat your application.


Download arrow.png Visit the Downloads page to download the source code used in this tutorial!


Contents

Getting Started

While not necessary, the sample project files for this tutorial will be very helpful in following along and understanding all the different ways of working with the Font Library Creator. Once downloaded and imported you'll see the three projects that are referenced in this tutorial.

015 001.png

Embedding Via ActionScript Files

Let's start off with an error. This is actually a great way to start because solving it will give good insight to:

  • How embedding, via metadata tags, work
  • Why using relative embed paths is useful
  • When using the Font Library Creator, embedding via .SWCs or .SWFs may be better

Absolute Paths Are Evil

After importing the project, jump to your Run Configurations window (Run>Run Configurations) and you'll see all the run configurations associated with these projects Img preview.png. If you choose to run ASDemo - Single Font you'll most likely see this error:

Could not create file /Users/OSX/_dev/fdt/EmbedFontsAS/bin/Single.swf.
Build failed.


This is because when I used the Font Library Creator tool, it embedded the fonts based on where they were located on my machine. If you take a look at the took at the font ActionScript classes you'll see the embed code being used Img preview.png:

[Embed(source="/Users/OSX/_dev/fdt/EmbedFontsAS/assets/Quicksand.otf"...


When using the Font Library Creator Tool to create ActionScript font classes, it will locate the fonts on your computer and use that path to write the embed code. In order to get this example running, you'll need to adjust the path to it matches the location on your machine. Before going on let's fix that.

Locate Quicksand.ffl within the libs folder and double click on it. The window that opens in the Editor is the GUI for FDT's Font Library Creator Img preview.png. Once here, find the field for File Font and click the browse button:

015 006.png

Wrap Up

FDT has many, many more features to be explored. Stay tuned for more tutorials!

Get FDT5