Question

From what I can tell on the Google Fonts API, these fonts are meant to be accessible by JavaScript/CSS. Is there any way to dynamically load them for a Flash application without having to download them locally to the server?

Update: So I’ve been piddling around with this some more, and the following are just some thoughts I had about how to go about it. None of them work, but I feel like they’re on the right track. Just for future reference…

When you choose a font to use in the Google API, you’re provided with a link to a CSS stylesheet that’s generated based on your preferences:

<link href='http://fonts.googleapis.com/css?family=Kranky' rel='stylesheet' type='text/css'>

I initially tried using just the href URL inside my <fx:Style source=.../>, but ActionScript rejected this (not sure if it was because it wasn’t local, or it realized it didn’t end in .css).

After that failed, I copied the link into my browser and manually retrieved the CSS, pasting it inside <fx:Style> tags like you would with any other CSS. Again, ActionScript didn’t like this because it couldn’t locally locate the URL.

I suspect some of these precautions are in place due to the whole ‘security sandbox’ bit that Flash enforces. Someone who has some more ActionScript prowess may be able to use this to solve the problem, but I don’t know if it’s solvable.

Answer 1

You can load dynamic fonts INTO flash/actionscript at runtime. There’s a good example of it here: http://developer.yahoo.com/flash/articles/runtime-fonts-as3.html

Basically it boils down to using a Loader class and Font.registerFont();

The problem is that the CSS provided by Google is providing a WOFF (web open font) file and I don’t believe flash can embed that font type yet.

However, the Google fonts are downloadable and easily embedable into your Flex/Flash applications. Simple go to the font you want on Google’s site and click “download”. From there, you can extract a TTF file and embed it directly into your Flash app.

You can do that in actionscript like this:

[Embed(source="theFontYouDownloaded.ttf",  fontName = "someFont",  mimeType = "application/x-font")]
private var someFont:Class;

In my experience sometimes you need to play with that mimetype to get it working right.

Since you appear to be using Flex, you can simply use a Flex style sheet like so:

@font-face
{
src:            url("fonts/someFont.ttf");
fontFamily:     someFont;
font-weight:    normal; 
}