Embedding fonts in a Flex application using Embed metadata (redux)
In a previous example, “Embedding fonts in a Flex application using Embed metadata”, we saw how you could embed fonts using the [Embed] metadata with the source attribute.
The following example shows how you can embed system fonts in a Flex application using the [Embed] metadata with the systemFont attribute.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.regularFontStyle {
fontFamily: regularFont;
}
.italicFontStyle {
fontFamily: italicFont;
fontStyle: italic;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.utils.ObjectUtil;
[Bindable]
[Embed("bulletWarning.png")]
private var bulletWarningIcon:Class;
[Embed(systemFont="Tahoma",
fontName="regularFont",
mimeType="application/x-font")]
private var font1:Class;
[Embed(systemFont="Tahoma",
fontName="italicFont",
fontStyle="italic",
advancedAntiAliasing="true",
mimeType="application/x-font")]
private var font2:Class;
private function displayEmbeddedFont(name:String):void {
var font:Object = systemManager.embeddedFontList[name];
Alert.show(ObjectUtil.toString(font), name + ":");
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="regularFont:" direction="horizontal">
<mx:Label id="lbl1"
text="The quick brown fox jumped over the lazy dog."
styleName="regularFontStyle" />
<mx:Image source="{bulletWarningIcon}"
click="displayEmbeddedFont('regularFont');" />
</mx:FormItem>
<mx:FormItem label="italicFont:" direction="horizontal">
<mx:Label id="lbl2"
text="The quick brown fox jumped over the lazy dog."
styleName="italicFontStyle" />
<mx:Image source="{bulletWarningIcon}"
click="displayEmbeddedFont('italicFont');" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
8 Responses to Embedding fonts in a Flex application using Embed metadata (redux)
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


Thanks for the explanation.
My problem with system font embedding is that the system font becomes antialised – which means it doesn’t looks so sharp as it could. As far as I understand fontAntiAliasType doesn’t apply to system fonts. So what can be done?
That would be an interesting answer. I’m searching my a.. off right now to find a solution to get the font sharper. But I need the embedding to animate everything properly :-/
Ah, found the solution :-) This thread http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/#more-252 is it…
Just use advancedAntiAliasing = true and fontGridFitType = pixel, that’s it to get the embbed font sharp…
Hi, thanks for this great acrticle. WIll this font embedding also work with a HTMLControl? Can i embed a special font and use it in the Webpage?
Thanks in advance for a response.
Robert
Hi Everyone,
I’m trying to place a button in vertical mode in flex 3. I am using the rotation property set to 90. It works great but the label of button disappears. Is there any way to retain the label of the button in vertical mode as the button is.
looking for some response …..
@Alex Fisherr,
Are you using an embedded font for the Button label?
Peter
Hey Peter,
the nice thing is, you could use the same fontName for all tpefaces of a font. So in the css you would specify if you want to use the imported italic or not.
Alex beata , sub say pehlay font embed kerwoo phir button ko stylename apply karo, ager phir b na hoo to HOD flex say poooch lena.
Samj aieeeeeeeeee