Posts Tagged ttf

A little about web fonts and @font-face

Hey I know it is not Flash related but I did a little research about web fonts and since I found a lot of bad information out there I thought it would be a good thing to post more good ones.

Ruling out the easy solutions

So basically my goal was to do as Flash does and have a website that uses a font that is not commonly on every computer. I had heard that you could do that now, so I set out on that quest. First thing I checked out was Google Web Fonts but the font that  the designer had chosen was not in there (obviously, why should it ;) ). Same thing with Typekit. I would have felt pretty comfortable using these services, they seem to make it easy and they handle browser compatibility, but I guess it would have been too easy. So I had to learn the hard way.

The hard way is not so hard after all

So my next hint was to investigate the css @font-face thingy (I have no idea how to call this: attribute, selector?). It looked good until you figure out that every browser interprets it differently and when I say every browser I mean Internet Explorer. The thing is it requires a different type format EOT (Embedded Open Type) which I had never heard about and if you don’t use it, it just won’t work. So after searching a bit more on EOT topic I found the solution to all my problems : Font Squirrel. Font Squirrel is basically @font-face made easy. You basically upload the font that you want and it is going to generate all the font files that you will need plus some examples on how to use them. It’s pretty neat. One thing to note is that if you put it in Expert mode you can tell it to just generate TTF and EOT which should be enough and will lower the number of files you need.

Here is what the css for @font-face look like:

@font-face {
    font-family: 'TradeGothicLTStdBdCnNo.20';
    src: url('../font/tradegothicltstd-bdcn20-webfont.eot');
    src: url('../font/tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/tradegothicltstd-bdcn20-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

And here is how you use it somewhere else:

.pageDescription{font-family: 'TradeGothicLTStdBdCnNo.20', sans-serif;}

Lastly, if you are going to use that font on the web, you will need the rights to do so. Some fonts are rights free but I guess most fonts aren’t, you’ll need to find a site where you can buy the rights to use them online.


				

, , , , , , , , ,

No Comments


Fonts are my bane; not anymore!

I hate managing fonts in Flash, I truly hate it. I don’t understand why it is not easier than this after all that time. How about underline; why can’t we still underline in the Flash IDE? That shouldn’t be voodoo magic, even Notepad has underline, ok, Notepad doesn’t have the underlining functionality, but Wordpad does.

Anyway, my biggest problem with fonts and Flash is not the underlining problem, but when you start using static and dynamic textfields with the same font family but with different font style. When you do that, your dynamic textfields will just not show and that is really annoying. A solution that works is if you put all textfields dynamic, but that’s even more annoying.

Now a really cool feature is that you can now embed fonts using the embed tag just like this:

[Embed(source="assets/fonts/GNL_____.PFB", fontName ="zedia GillSansLight", unicodeRange='U+0020-U+007A, U+00C0-U+00F6, U+2019', mimeType="application/x-font-truetype")]
private var GillSansLight2:Class;

Not sure that this will work when you compile using the Flash IDE, but when doing ActionScript projects or Flex projects this works just fine. This way you can embed ttf, otf and pfb fonts. I am not quite sure how to embed fonts on a Mac system, it will still work with those formats, but I know Macintosh has other formats. The thing that makes this work is that you can specify the font name. Be sure to specify a name that you know Flash wouldn’t specify. My coworker gave me the trick to add the name of the project in the font name that way it’s always going to be different than Flash. If you don’t make it different you will still run in the problem of your dynamic textfields not showing up.

Once you have embedded the font you need to register it in your application like this:

Font.registerFont(GillSansLight2);

This will make the font available anywhere in your application. All you need to do is create a TextFormat with that font and assign that TextFormat to your textfield:

var tf:TextFormat = new TextFormat("zedia GillSansLight");//this is what you put into fontName in the embed tag
myTextfield.embedFonts = true; //this line is also important
myTextfield.defaultTextFormat = tf; //always assign the default textformat before modifying the text property
myTextfiled.text = "lorem ipsum";

Now, using this technique you can choose exactly what character from the font you want to embed. In the previous example the unicodeRange represented those characters:

U+0020-U+007A = SPACE!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz
U+00C0-U+00F6 = ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö
U+2019 = ’

This is a pretty safe set, but you can always change it and optimize it.

Here is a good resource to do Unicode conversion:
http://rishida.net/scripts/uniview/conversion.php

, , , , , , , ,

12 Comments