Embedding fonts in Adobe Flex
I just solved a problem that I have been fighting for many hours and generated a lot of frustration. The solution was quite simple, but it proved difficult to identify the problem.
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!
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
No comments yet.
Leave a comment