When you need to embed a font in Adobe Flex, you do so by adding something like this in the css:

@font-face {
        font-family: Gotham;
        src: url('assets/Gotham.otf');
}
.headerText
{
	font-family: Gotham;
	font-size: 18pt;
	color:#fbaf33;
}

The original problem was that some parts of the Flex application were using the font, but specific components did not. The problem got confusing when a co-worker was able to see the correct font in all components with the same code base.

After much research and trial and error, we found that the reason he was able to see the font in all components was that he had the font installed in his computer. So apparently, Flash and the browser displayed the correct font from the system when not being able to get it from the embed font.

So, after finding out that the font had to be installed locally to be displayed all across the Flex application, and after removing the font locally, the solution came quicker:

When embedding fonts in Flex, you need to embed each font style and weight separately. And this important: You cannot specify the weight in the css style names. You just specify which font family you want to use to use a different font weight.

This is how it would be done:

@font-face {
        font-family: Gotham;
        src: url('assets/Gotham.otf');
}
@font-face {
        font-family: Gotham-Bold;
        src: url('assets/Gotham-Bold.otf');
}

.headerText
{
	font-family: Gotham;
	font-size: 18pt;
	color:#fbaf33;
}

.headerText2
{
	font-family: Gotham-Bold;
	font-size: 18pt;
	color:#fbaf33;
}

I am sure I will not make this mistake again!

Thanks for sharing it!

All I needed to do is validate a string to verify if it follows the pattern of a hostname.

After much work and research I finally narrowed it down and here it is:

<mx:RegExpValidator id="regExpV"
source="{tbDomainName}" property="text"
flags="i" expression="^[a-zA-Z0-9\-\.]+\.[A-Za-z]\{2,6\}$"
/>

Notice the backslashes for escaping { and }  as these characters are used in Flex for data binding.

A weird problem occured: The input text was empty even though the property in the object has some text. I tested by removing the Binding and was able to see the text in the Input.  Weird… I’ve done this so many times before and never had a problem.

Well, it turns out that if you set the object where the Input grabs the text from before adding the component to the tree of UIComponents for some reason the Binding messes up. So the solution was adding the Panel to the parent and then setting this object where Input grabs the text from.