Google Fonts API and ActionScript

Question

From what I can say about the Google Fonts API, these fonts are designed to access JavaScript / CSS. Is there a way to dynamically load them for a Flash application without downloading them locally to the server?

Update:. So, I’ve thought about this several times already, and the following are just some thoughts on how to do this. None of them work, but I feel that they are on the right track. For future reference only ...

When you select a font for use in the Google APIs, you are provided with a link to a CSS stylesheet based on your settings:

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

At first I tried to use only the href URL inside my <fx:Style source=.../> , but ActionScript rejected it (not sure if it was because it was not local, or it realized that it did not end with .css ).

After that, I copied the link to my browser and manually extracted the CSS by pasting it into the <fx:Style> tags, as with any other CSS. Again, ActionScript did not like it because it was not possible to locate the URL locally.

I suspect that some of these precautions exist because of the whole “sandbox” bit that Flash supports. Someone with a few more ActionScript skills can use this to solve the problem, but I don't know if this is solvable.

Answer 1

You can load dynamic INTO flash / actionscript fonts at runtime. Here is a good example: http://developer.yahoo.com/flash/articles/runtime-fonts-as3.html

It basically boils down to using the Loader class and Font.registerFont();

The problem is that the CSS provided by Google provides a WOFF file (web font), and I don't think flash can embed this font type yet.

However, Google fonts can be downloaded and easily integrated into your Flex / Flash applications. Just go to the font you want on Google and click download. From there, you can extract the TTF file and paste it directly into your Flash application.

You can do this in actionscript as follows:

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

In my experience, sometimes you need to play with this mimetic so that it works correctly.

Since you seem to be using Flex, you can simply use the Flex stylesheet as follows:

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