What do you think when you hear the word fonts…
Beauty is hard to discover.
At the Ewing Enterprise office ,I’ve spent a couple weeks worth now trying to figure out the best and most complete approach to font embedding using various font techniques in a number of different IDE‘s and even created custom API‘s. I’ve tried to use special [Embed] tags in Actionscript, MXML, XML, CSS and came to the conclusion, there is no “easy” way that always works. It really is a dark art that must be mastered. It is by no means a straightforward process, however, it is an art you become a seasoned expert in. With a little practice, some creativity and of course patience, you could not only look forward to hearing the word font but maybe even dabble in some typography design (don’t worry, there are going to be a few examples of typography during and at the end of this post).
Font Basics
Generally speaking, these days, a font on our system (referring to Windows and Mac OS X) is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). While it would be nice to be able to just throw a font like this on the web and link it up, we’re hit with three major limitations.
Licensing,
Browser Support, and
End-User support (they’re not missing fonts)
Just as a side note, the code examples given in this post will almost all be in Actionscript 3 (AS3) and MXML with the assumption you have previous experience with the language, a familiarity with object oriented programming (OOP) as well as some fundamental working knowledge of Flash Builder 4. This is a broad overview with examples that are not detailed for a beginner.
Overview
I have spent some time actually working with font embedding in AS3 and gone a little beyond the other simple examples you will see. While there may be several posts about embedding fonts in AS3, I have yet to see any real detailed information along with things to be aware of. If you have yet to see any of the basic examples you can look at the code below for a basic, quick and super easy way to get up and going with font embedding.
// be sure this is pointing to a ttf font in your hardrive
[Embed(source="C:\WINDOWS\Fonts\YOUR_FONT_NAME.ttf", fontFamily="OPTIONAL_PARAMETER")]
public var myFirstFont:String;
//////////////////////////////////
//OR (I like the second way more)
//////////////////////////////////
[ Embed( source='../fonts/NAME_OF_FONT.ttf', fontWeight='bold', fontName='myFontName', mimeType='application/x-font', advancedAntiAliasing='true' ) ]
private var fontName:Class; // declare as class to dynamically assign it later and for easy implementation globally
Yes, it really is that simple to embed fonts now — at least, on the surface it is. Let us dive down a little deeper and look at a few more examples.
I AM NOT MYSELF.
For the examples above, you could use that inside the MXML section or if you wanted to externalize the fonts for dynamically loading upon request or for asyncronous types of applications, you could encapsulate the fonts inside an external CSS file and load that at runtime or when needed, for example:
@font-face {
src: local("Arial");
fontFamily: ArialEmbedded;
fontWeight: normal;
}
or if you wanted to have the CSS inside of your RIA and handle it with MXML you could also use:
<mx:Style>
.mystyle1
{
fontFamily:myMyriadFont;
fontSize: 32pt;
}
</mx:Style>;
Conclusion
Hopefully, this will help create a little extra awareness for what is involved with embedding fonts in AS3 (or MXML or CSS), as well as document what causes the most common errors. In summary, I really like the way we can manage embedded assets in AS3 now. There’s still one large problem that is left unaddressed (to my knowledge) in AS3 however: Shared Libraries (which we will discuss in another post). Especially with how Flash is maturing as a presentation medium for rich applications, it is difficult to still see this thorn persisting (it’s been around since Flash 5 I believe).
I hope this post helps and feel free to share it and like it if this helped and don’t forget to add us to your RSS and come back soon. Also, there is some awesome font images and typography below to motivate you 🙂
my words just crumble as they leave me... never ever to reach You...
Collide
Come Back To Me
What Lies Within
Stay Green, Go Red
Yeah!!! Hope you liked that awesome stuff, “Like” if you liked it ha!
FREE SEO eBook! Enter Your Email
