Posts tagged fonts

How to embed fonts in Actionscript 3.0 – The easy way

In this tutorial I will teach you how to embed a custom font. Embedding fonts is good practice in case if the person viewing your flash application or website does not have the font installed on their computer.

In your .fla file go to the library menu and select New Font

The library menu

A font properties menu will show up. Here you can edit the font name and the font. As you can see I have named font to be myFont Plain. This is because the font that Iam embedding is not bold nor italic. You can name it whatever you want but be descriptive to avoid confusion. The Font is named myFont. This is your main name for the font. Below are some checkboxes which help identify the style of the Font. If I style text with myFont, because I left the checkboxes blank the system will use myFont Plain. If I had created another font which was myFont, had its name as myFont Bold and then selected the bold style, I would have a Bold style for myFont. Now when I use myFont, I can use a bold tag around it and the myFont Bold will get shown.

After adding the new font you should be able to see it in your library. Right click on it and select Linkage. In the Linkage properties window check the box that says Export for ActionScript. You can name the class anything you want but make sure you don’t change the Base Class name.

Now go into your .as file. You will need to import the following classes to make this work.

import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.AntiAliasType;

Now that we have our classes loaded we will create a text format and a text field and then add the format to the new text field.

var format:TextFormat = new TextFormat();
format.font = ‘myFont’;
format.color = 0×333333;
var myText:TextField = new TextField();
myText.text = ‘Some Filler Text’;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.setTextFormat(format);

And there you go. You now have textfield using custom font.

Known Problems

-I am using Flash CS3 on my Macbook Pro and I found that if you add a font to your computer in the fonts folder while Flash is open the font may not be displayed. Instead what was happening to me was I was getting a default font. This made me stressed as nobody was having this problem. But all you have to do is close Flash and reopen Flash and your font will work now. There is some refreshing issue that Flash has with this process in CS3.

I will be posting any other issues with possible solutions.

If you liked this post, you might also like…

How to change a textfield’s alpha in Actionscript 3.0

Simple Image Gallery in Flash CS4

Top 10 Web Design Resources Every Designer Should Know About

Where would web designers be without the invaluable resources provided on the web for us? Design inspiration, stock photos, tutorials, fonts, freebies, brushes, textures … the list goes on. Take advantage of the resources and expertise other web designers offer for free! Here are 10 of my absolute favourites, in no particular order:

Design Meltdown (design inspiration)

Browse thousands of cataloged sites to get inspiration for your own web designs – invaluable for finding inspiration on specific design elements, styles, themes, or colours.

Scrnshots (design inspiration)

Browse screenshots of inspirational web design uploaded by other users or upload your own favourite designs. Very useful for finding inspiration about specific elements since you browse by tags and keywords.

Designer’s Toolbox (design resources)

Provides many miscellaneous design and print resources, including PSDs of HTML form and browser elements for realistic design mock-ups.

Stock Xchng (stock photos)

One of the best free stock photo sites; Stock Exchange provides thousands of super high-quality stock photos for FREE for both personal and commercial use.

Smashing Magazine (interactive design blog)

The most well-known web design blog out there, Smashing Magazine provides TONS of information, resources, tutorials, and tips from industry professionals. Try to soak up as much of their expertise as you possibly can.

DaFont (free fonts)

Browse their huge selection of free fonts to spice up your design. They make it easy to find a specific type of font since you can browse by theme, name, or search for keywords!

Blind Text Generator (dummy text)

Generates highly-customizable dummy text (lorem ipsum) for use in the text areas of your design.

Type Tester (css font comparison)

Preview different web-safe fonts to see what they will look like on the screen and customize the different CSS font options.

Color Scheme Designer (colour palettes)

Highly-customize colour palette generator which allows you to also preview what the colour scheme could look like on a web page.

Design Resources Search Engine (design search engine)

This search engine has endless usefulness – it allows you to do a Google search but only on the selected design-related websites. Great for finding tutorials, resources, and blogs.

What are YOUR favourite web design resources? Comment and let us know! :)

If you liked this post, you might also like…

Top 10 Best Cheap Web Hosts

Firebug is Every Web Developer’s Friend

GIMP – The FREE Alternative to Photoshop

CSS Custom Font-Face

On the request of my friends, this post will show you how to simply add your own font face to your website using CSS. This comes in handy when you want to display dynamic text on a webpage when the user does not have the font installed on their system. This is a very old CSS trick that is not used very much and is not even CSS3. It will work in all browsers but Internet Explorer. The reason being is that Internet Explorer uses a different font-face type. For this tutorial we will be using the “True Type” format for our fonts and has the “.ttf” file extension, you can download any True Type font and use it.

Get started on my tutorial by clicking the link below! It literally takes 10mins or less to learn!

View the Full Tutorial Here!