Embedding Fonts

Change the font.fla file

Say that you want to embed a custom font, eg. CF Din Condensed Bold.

Open workfontsfonts.fla.

Create a new Dynamic Textfield and enter a sample text in it.

In the Properties > Character panel, enter the desired family and style.

Now, press the Embed button and embed all the characters you may use.

Finally, press CTRL+ENTER to compile.

Change the style.css file

Now, open deployfontsstyle.css.

Create the new css entry. Give a descriptive name (you will use it in you code).

.cf_din_cond_bold {
    font-family: "CF Din Condensed";
    font-size: 20;
    color: #000000;
}

Solve font-family name problems

To make certain that you' re using the right font-family property, open your fonts folder, in my computer C:WINDOWSFonts

Locate your .ttf (.otf) file and open it. There, right next to the Typeface Name, you will find the font-family name. Use this exact name in your css.

Change the according page fla file

Last but not least, open the fla which have the desired textfield. In order for the method to word you must have a symbol (let's name it myTextfield) on stage.

import net.kaegi.utils.VarCentral;

var varcentral:Object = VarCentral.getInstance().vars;

myTextfield.styleSheet = varcentral.flebFontManager.getStyleSheet();

// make sure font is embedded
myTextfield.embedFonts = true;

// ignore white space if text from xml
myTextfield.condenseWhite  = true;

// ignore mouse wheel
myTextfield.mouseWheelEnabled = false;

// set text content
myTextfield.text = "<span class='cf_din_cond_bold'>" + txt + "</span>";

// disable highlighted text scrolling
myTextfield.height = myTextfield.textHeight + 6; // if 6 doesnt work use greater 

You can also put a symbol in the library, export it for actionscript and create the textfield runtime like this:

var myTextField:MyTextfieldLibrarySymbol = new MyTextfieldLibrarySymbol();
// continue as above

Or you can even create the textfield on the fly:

var myTextField:Textfield = new Textfield();

Important notice

Make sure that no other textfield exists in the page fla with the same font which you are trying to embed. It will not work and I assure you you will pull your hair off!

Another important notice

Make sure that you use arcentral.flebNavigationManager after it is initialized! If you use it for example in Main.as in it's start it will not work! A good point is in addressChangeHandler (only when the site is run for the first time).

What about links?

Since fleb uses CSS, it's a piece of cake to use links in your pages.

Links to others fleb pages

If you want to be redirected to a page inside your fleb site:

<a href="#/contact/">Link to contact page</a>

Warning: This will only work on a server (not when you debug the project).

Links to documents

If you want to be redirected to a new browser page when you click a document link:

<a href="docs/myPdf.pdf" target="_blank">Link to pdf document</a>

Links to other sites

If you want to be redirected to a new browser page when you click a web page link:

<a href="http://www.my-website.com" target="_blank">Link to www.my-website.com</a>

Mail links

If you want the default mail program to be opened with a desired mail address atttached to it:

<a href="mailto:info@my-website.com">Send us a mail!</a>

Don't forget to add your link styles inside css.

/* LINKS */
a:link{
    color: #58595B;
}
a:hover{
    color: #000000;
}

 

 

Post A Comment

Anti-Spam Quiz: