Posts tagged embedding

Flex font embedding nightmare

Sep 8th

Posted by Danny Kopping in ActionScript 3.0

No comments

There are many things that really irritate me – pretence, dishonesty, blind faith and Flex font embedding! Sometimes it makes me wonder whether i really exist… Ok, that’s taking it a bit far, but it really grates my nuts sometimes. I was recently (this evening) working on a website for a production company and i added a custom preloader from Flash (thank you Mr Brimelow!) to my Flex application. I’d embedded a font to use for the content in my site and i’d used the same font for the percentage loaded textfield in the preloader.

So i carried on happily putting the finishing touches on the site when disaster struck! The embedded fonts no longer showed up! I was perplexed… After about an hour of trying ever single bloody trick in the book and vociferous googling, i found… nothing. The worst part was that any other font worked, except the one that i was using for the site, and the client needed that specific font – no compromise.

As luck would have it, i had a chance brainfart and decided to check my font embedding settings in my Flash preloader. Wouldn’t you know it… Flash was screwing up my fonts! It’s no fault of Flash’s though… It was embedding the fonts before Flex could, and it was embedding only a handful of glyphs.

So… Next time your fonts spontaneously stop working in Flex, check out any Flash resources you’re including in the site to make sure that the font embedding isn’t pernicious.

, , , ,

Flash-style Font Embedding

Nov 8th

Posted by Danny Kopping in AIR

2 comments

One of the things i love about Flash (and man, there are so few things) is that you can embed a range of Unicode characters of a specific font into your application. A range is basically a set of characters that exists in your desired font (ie Latin characters). For more info on Unicode characters and ranges, go here.

So, now, how does one embed a font into Flex?

Well, it’s actually quite simple. Inside of the <Style> tag or in an external .css file, you can embed a font using the following syntax:

@font-face
{
      src:url("../assets/MyriadWebPro.ttf"); /* A .ttf inside your project */
      fontFamily: myFontFamily;
}

or using an installed font:

@font-face
{
    fontFamily: "Lucida Sans";
    src: local("Lucida Sans");
}

The following syntax illustrates how to embed only certain unicode ranges of your font:

@font-face
{
    src:url("../assets/MyriadWebPro.ttf");
    fontFamily: myFontFamily;
    unicodeRange:
        U+0041-U+005A, /* Upper-Case [A..Z] */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0030-U+0039, /* Numbers [0..9] */
        U+002E-U+002E; /* Period [.] */
}

Now how cool is that?! Flex rocks!

, , , ,