Embedding fonts with CSS

I have a client wanting a particular font used on a web page.
I have searched a bit as to how to do this and apparently it's possible with a few lines of CSS code.
I don't see too many examples and I am sure there will be compatabililty issues with browsers.......
Any actual experience out there.
Thanks,
Rick

Hi
Be aware that these will ONLY work in Firefox 3.6.x, Safari 5, Chrome 8+
(pretty sure about this one), IE 9+, Opera. Older versions of IE and
Firefox will only show the default browser font instead of
substitution.
Sorry but this is not true, the @font-face rule was first implemented in IE4.5, and works across all the current IE version, the difference is the font format, (file extension used) in version of IE < 9, but it does still work, and as for Firefox the @font-face rule was implemented from version 2, but again the font file extension was changed in version 3. and additional types of font files have been implemented in FF4, Safari (and Chrome) also has similar implementation to FF, (from version 3) but does not include the new format as an alternative.
The licensing issues are the only real major drawback now and this will probably not change for a few years yet.
To find out how to use @font-face, (cross-browser) and for free 'open-source' fonts my recommendation is - http://typekit.com/, which is much better than Googles offerings, there are a number of paid for services available and a search, (using your preferred search engine) will find these for you, but in no circumstances should you even consider un-licensed use of fonts.
You may also wish to read this thread - http://forums.adobe.com/thread/740447.
PZ
www.pziecina.com

Similar Messages

Problems with embedded font with medium or heavy weight

Hey guys,
I'm switching a current Project from Flashbuilder Beta2 to the Flashbuilder final release.
I have a big problem concerning embedded fonts. The fonts I have to use are Futura Com Medium & Futura Com Heavy.
Here's some of my code:
@font-face
     src:                        url("assets/fonts/FuturaCom-Medium.ttf");
     font-weight:               normal;
     fontFamily:                 myFuturaMedium;
     advancedAntiAliasing:       true;
     embedAsCff:                 false;
.myDatagrid{
     fontFamily: myFuturaMedium;
     color: #ff0000;
this worked well in beta2, but I'm not able to get the embedded Font working in the datagrid with the Flashbuilder final release.
Any help on using embedded fonts in a mx|Datagrid is highly aprechiated.
Cheers

Hey guys,
I'm switching a current Project from Flashbuilder Beta2 to the Flashbuilder final release.
I have a big problem concerning embedded fonts. The fonts I have to use are Futura Com Medium & Futura Com Heavy.
Here's some of my code:
@font-face
     src:                        url("assets/fonts/FuturaCom-Medium.ttf");
     font-weight:               normal;
     fontFamily:                 myFuturaMedium;
     advancedAntiAliasing:       true;
     embedAsCff:                 false;
.myDatagrid{
     fontFamily: myFuturaMedium;
     color: #ff0000;
this worked well in beta2, but I'm not able to get the embedded Font working in the datagrid with the Flashbuilder final release.
Any help on using embedded fonts in a mx|Datagrid is highly aprechiated.
Cheers

Embedding fonts in css

The following file uses two approaches to style text: CSS and TextFormat They result in different results that are very similar, but different. I suspect that I am not embedding fonts properly when using CSS. Am I correct and, if so, what should I be doing?
Main file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Style source="styleSheet.css" />
    <mx:Script>
        <![CDATA[
import flash.text.*;
import mx.core.UIComponent;
private var textFormats:TextFormats=new TextFormats;
private function init():void{
    var spellingExplanation:TextField=new TextField
    spellingExplanation.text="Characters"
    spellingExplanation.setTextFormat(textFormats.buttonStyle1);
       spellingExplanation.autoSize=TextFieldAutoSize.LEFT
       spellingExplanation.embedFonts=true;
    var container:UIComponent = new UIComponent()
    container.addChild(spellingExplanation)
    textContainer.addChild(container)
        ]]>
    </mx:Script>
    <mx:VBox id="textContainer">
        <mx:Label    text="Characters" styleName="buttonStyle1"/>
    </mx:VBox>
</mx:Application>
styleSheet.css
@font-face {
    fontFamily: FranklinGothicMedium;
    src: url("framd.ttf");
.buttonStyle1 {
   color: #000000;
   fontSize: 14;
   fontFamily: FranklinGothicMedium;
TextFormats.as
package{
    import flash.text.TextFormat;
    public class TextFormats{
    [Embed(source='framd.ttf', fontName="FranklinGothicMedium", mimeType="application/x-font-truetype")]
        public static const FranklinGothicMedium:String;
        private var _buttonStyle1:TextFormat;
        public function TextFormats(){
            buttonStyle1 = new TextFormat();
            buttonStyle1.color = 0x000000;
            buttonStyle1.font = "FranklinGothicMedium"//"Franklin Gothic Medium";
            buttonStyle1.size = 14;
        public function get buttonStyle1():TextFormat {
            return _buttonStyle1;
        public function set buttonStyle1(value:TextFormat):void {
            _buttonStyle1=value;

I've attached a file to show the differences. The top image shows the result of the css and the bottom image the result of using the TextFormat. The differences that become clear when the text is examined in Photoshop.

Problem embedding fonts with ButtonSkin class with SDK 4.5.1

Hi,
I've an external style file calling into main mobile application which has codes something like these:
@font-face {
          src: url("../fonts/TektonPro-BoldCond.otf");
fontFamily: TektonProBCnd;
embedAsCFF: false;
.buttonStyle {
embedFonts: true;
fontFamily: TektonProBCnd;
fontSize: 24;
skin: ClassReference(null);
.text_listMediumText {
fontFamily: TektonProBCnd;
fontSize: 24;
          color:                               #666666;
In my application the embedding font styles working properly when directly bind with any component with 'styleName' property (i.e. text_listMediumText). I've also one button something like this:
<s:Button label="CONNECT" skinClass="actionScripts.ui.SketchButtonSkin" click="onConnect()"/>
And the skin class is as follows:
public class SketchButtonSkin extends ButtonSkin
// PRIVATE VARIABLES
                     * CONSTRUCTOR
                    public function SketchButtonSkin()
                              super();
                              width = 268;
                              height = 50;
// OVERRIDDEN API
// Override this function to prvent the button from drawing a background
                    override protected function drawBackground(unscaledWidth:Number,
                                                                                                                           unscaledHeight:Number):void{
override protected function
                              labelDisplay_valueCommitHandler(event:FlexEvent):void
                              labelDisplay.setStyle( "fontSize", 20 );
               labelDisplay.setStyle("fontFamily","TektonProBCnd"); // or, labelDisplay.styleDeclaration = styleManager.getStyleDeclaration(".buttonStyle");
But I not ever could embed the font with this buttonSkin class. Any help please (?)

Try linking a Scroller into your app.

Embedded fonts with rich editable text

Hi, I am trying to use my embedded fonts in rich editable text field, but it only works for users that already have that font installed on their system.
This is what I do.
I embed fonts like this:
     @font-face {
            src:url("fonts/Cantarell-Regular.ttf");
            fontFamily: Cantarell;
            advancedAntiAliasing: true;
        @font-face {
            src:url("fonts/Cantarell-Bold.ttf");
            fontFamily: Cantarell;
            fontWeight: bold;
            advancedAntiAliasing: true;
Then in my DropDownList (id=fontPicker) I add a new string entry that references my new font (in this case "Cantarell")
I have a custom item renderer which makes sure to print out the name of the font using the font itself, so that for example font name "Cantarell" will be printed out using Cantarell font. Code in my custom font item renderer looks like this:
<s:Label id="labelDisplay"
             fontFamily="{data}"
             verticalCenter="0"
             left="3" right="3" top="6" bottom="4"/>
And this part works, even if you dont have the font installed on your system, the name of the font is displayed propperly.
The thing that I want to do is to select some text in my rich editable text field and change the font of the selected text depending on what user selected from the dropdownlist. I added an event which is called once user selects new font type, and it performs following code on the selection in rich editable text:
               if(fontPicker.selectedIndex == -1){
                    //user did not select anything, we do not change the font
                    text.setFocus();
                    return;
               //we get the text layout format of the selected text
                var txtLayFmt:TextLayoutFormat = text.getFormatOfRange(null,text.selectionAnchorPosition,text.selectionActivePosition);
               //we change fontFamily of the selected text to the font that we just picked
                txtLayFmt.fontFamily = fontPicker.selectedItem;
                // I even tryed to add those two following lines without much help
                //txtLayFmt.fontLookup = FontLookup.EMBEDDED_CFF;
                //txtLayFmt.renderingMode = RenderingMode.CFF;
               // we update our selected text with new font
                text.setFormatOfRange(txtLayFmt,text.selectionAnchorPosition,text.selectionActivePosition );
                text.setFocus();
This code works perfect if user has the font installed on their system but it does not work if they dont have the font even if I embed the font.
What I am doing wrong, any suggestions, tips, links?
Thanks,
Dal

Thanks I will take a look at your blogs, maybe I find some explanations.
Once it comes to my problem, I found a solution, I just needed to add a simple style:
        .mystyle1 {
             fontFamily:Cantarell;
and set the styleName of my text to it:
text.styleName = "mystyle1";
Afterwards I can dynamically change fonts and sizes of the text selections in my rich editable text field as much as I like.
Also I need to make sure that I set embed-as-cff: true;
    @font-face {
            src:url("fonts/Cantarell-Bold.ttf");
            fontFamily: Cantarell;
            fontWeight: bold;
            advancedAntiAliasing: true;
            embed-as-cff: true;
I hope this helps someone.
And if anyone has explanation to why embedded fonts work only after I change styleName of a text to a random style, please share with me.
Cheers,
Dal.

Embedding Fonts with Forms Service RenderPDFForm

We have several custom fonts being used in PDFs we're rendering using the Forms Service RenderPDFForm API. Rather than require consumers of these PDFs to have those fonts installed, we'd like to embed them in the PDFs being generated. Is it possible to embed fonts using RenderPDFForm?
Tom

In the adobe/LiveCycle8.2/deploy folder there is a file called:
adobe-forms-ivs-jboss.ear
Deploy that file on your app server (note that the name may change to reflect your app server). Once it is deployed you can access the application (it is a testing program for Forms). The URL is:
http://machinename:port/FormsIVS
Once it is loaded click on the preferences in the top right corner. Scroll to the bottom and add the administrator/password for your installation. In the first field (called Options) changed the parameter PADebug=0 to PADebug=1. Don't forget to hit the save button at the bottom of the screen. This will return you to the Test Form Design screen. Choose a form from the right List (I chose PurchaseOrder_Dynamic Interactive.xdp). In the Output format dropdown, choose PDFForm. Now click on the Use EJB button. A call to form server will be generated and returned to the screen. Because we have PADebug set to true the whole process is being traced. I am running a JBoss server so the files are written to:
C:\Adobe\LiveCycle8.2\jboss\server\all\svcdata\FormServer\Debug
It will be a different location depending on the appserver type you are running. In that folder is a file called:
debug_xci_pdf.xml
Make a copy of this file and rename it to MyTest.xci. This is the control file we will pass into the call and also modify to embed fonts. Open this file with an XML editor. In the xci file look for the pdf node under the present tag. In that node there is a child node called fontInfo. There is an embed tag in there that is set to 0. Change it to a 1 and save the file. Now in the call to Forms you can pass in a URI to this file in the XCI URI parameter. You can change this in the FormsIVS application in the options string and try it for yourself before changing our app. So now each time you want to embed the fonts pass the XCI URI into the call otherwise use the default one that is embedded in the jar file.
Let me know that it worked for you.

Embedding fonts with an application

This is a multipart question so I will put up some bucks for a good answer.
I am writing an application and have a set of fonts that I want to bundle with it. I want the application to use ONLY these fonts and not have access to any other system fonts. Does anyone have any experience with this and is it even possible. My thinking is that I would need to somehow install the fonts on the users system and then modify the font.properties file. I would like to bundle everything together in the application but I don't think that is possible, is it?
If this is a simple thing and I have just not looked in the right places for an answer than point out those places to me and earn some Dukes! I have looked everywere and there doesn't seem to be much info out there, but what do I know... I may be dumb, I do not argue that.
WHAT DO I DO?
CAN I DO ANYTHING?
I AM TIRED!
Help me and earn big bucks.
Thanks.

Well if you're using JDK 1.3 and up, you can do it easily with the following code:
FileInputStream fileStream = null;
Font font = null;
try {
fileStream = new FileInputStream("BASSETB.TTF");
font = Font.createFont(Font.TRUETYPE_FONT, fileStream);
font = font.deriveFont(Font.PLAIN, 12);
fileStream.close();
} catch (Exception e) {}
Font.createFont(x,y) only works with true type fonts, and is only availabe after JDK 1.3. But you don't have to mess with any properties files this way.

Load custom Font with CSS

Hi, Experts..
I have developed an bsp application , I want it to assign a custom FONT, that it not present into Client System. I have modified the CSS Style adding this code:
@font-face {
     Font-family: NameFont.ttf;
     Scr: url(./PATH _fonts);
.classHtml {
     Font-family:NameFont.ttf;
In this mode the font isnt loaded into web page. Link reference http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions
If you provide me sample I would be thankful to you.

1st
Not sure if I'am right, but the extension must be left.
Try:
Font-family: NameFont
2nd
Try to use an URL, like "http://yourserver.com/path/font.ttf"

Embedding fonts//using css

do you know how to use the embed fonts feature and css? or anti-alias the text that is styled using css?
i have tried to set:
titlefield.embedFonts = true;
titlefield.stylesheet = sheet;
but it does not work. if i comment out the embedFonts the css works fine but the text is very aliased. but as3 does not support the embed font property within css.
i appreciate any help!!

you need to embed, at least, one font in your library: click the upper right of your library panel, click new font, select a font, tick the characters you want to embed, assign a name, click the actionscript tab and tick export for actionscript and assign a class name, eg YourFont.
you can then use:
var yf:Font = new YourFont();
var yfO:Object = {fontFamily:yf.fontName};
var ss:StyleSheet = new StyleSheet()
ss.setStyle(".yourfont", yfO);
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.styleSheet = ss;
addChild(tf);
tf.embedFonts = true;
tf.htmlText = "<span class='yourfont'>your text in YourFont</span> ";

Embedding Fonts with ActionScript

I'm trying to embed dynamic text and the ActionScript tab is disabled. I need to acess that tab to complete a tutorial. How can I enable it?

Can you be more specific? May be I can help.
- Hemanth

Loading fonts with stylemanager

Hi all,
I am have embedded fonts with css and compiled css to swf.
Each font I am loading with StlyeManager.load methods. When each loads swf it renders whole application.
any suggestion what to do?
Should i use module loader ?
Please help me.
Thanks,
-CK

Load fonts from module. Below is the code for it.
var fontPath:string = "http://yourserverpath/Arial.swf";
//create new ulr request
var request:URLRequest = new URLRequest(fontPath);
//create new module loader
moduleLoader = new ModuleLoader();
moduleLoader.addEventListener(ModuleEvent.READY,onReady);
//create new urlloader
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE,loadComplete);
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.load(request);
//create listner for loader load complete event
private function loadComplete(event:Event):void
    //remove complete event listener from urlloader
    loader.removeEventListener(Event.COMPLETE,loadComplete);
    var moduleBytes:ByteArray = ByteArray(URLLoader(event.target).data);
    moduleLoader.loadModule(fontPath,moduleBytes);
    loader=null;
//module ready listner. module is loaded
private function onReady(event:ModuleEvent):void
     //Arial.swf is loaded you can use it
     var textArea:TextArea=new TextArea();
     textArea.text = "This is Arial Font";
     textArea.rotation = 45;
     textArea.setStyle("fontFamily","Arial");
     this.addChild(textArea);

Problems with embedded font on spark RichText control

« Hide
I have an embedded font that appears correctly when used with Halo components, but when associated with the spark RichText component, it is not recognized.
The embedded font is defined in css file, my css file
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@font-face {
src:url("assets/fonts.swf");
fontFamily: "Helvetica Neue";
@font-face {
src:url("assets/fonts.swf");
fontFamily:"Helvetica Neue";
fontWeight: bold;
global{
color:#333333;
fontFamily: "Helvetica Neue";
fontSize:12px;
The embedded font it used in the following manner:
<mx:Label styleName="panelTitle" text="Hello There" width="263" x="21" y="11"/>
<s:Group width="410" x="38" y="52" height="50">
<s:RichText styleName="panelTitle" text="Hello There" fontFamily="Helvetica Neue" width="263" x="21" y="11"/>
</s:Group>
The Label shows the embedded font correctly while the RichText control does not. It does not matter if the fontFamily is specified explicitly on the control or not.
I created a bug SDK-22137, but since I'd need to get this working soon any help would be appreciated.

Just a friendly reminder. Many of the examples on that site are fairly old and havent been updated to use the latest APIs. For example, "cff" has recently been renamed to "embedAsCFF". In fact, here's a better example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        /* DefineFont3 (embedAsCFF == false) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgia;
            fontWeight: normal;
            embedAsCFF: false;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgia;
            fontWeight: bold;
            embedAsCFF: false;
        /* DefineFont4 (embedAsCFF == true) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: normal;
            embedAsCFF: true;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: bold;
            embedAsCFF: true;
        mx|Label {
            fontFamily: embGeorgia;
        s|RichText {
            fontFamily: embGeorgiaCFF;
            fontLookup: embeddedCFF;
    </fx:Style>
    <mx:Label text="Halo Label" />
    <mx:Label text="Halo Label (bold)" fontWeight="bold" />
    <s:RichText text="Spark RichText" />
    <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
</s:Application>
Also, depending on what you're trying to do, this may help you: http://blog.flexexamples.com/2009/06/14/using-a-cff-embedded-font-with-a-halo-label-contro l-in-flex-4/. Basically, you can set the textFieldClass style on certain Halo controls and have them use the mx.core.UITLFTextFieldClass (instead of the default mx.core.UITextFieldClass) so they can take advantage of the new CFF fonts.
In fact, here's the same example as above, but with the single embedded font:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        /* DefineFont4 (embedAsCFF == true) */
        @font-face {
            src: url("assets/georgia.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: normal;
            embedAsCFF: true;
        @font-face {
            src: url("assets/georgiab.TTF");
            fontFamily: embGeorgiaCFF;
            fontWeight: bold;
            embedAsCFF: true;
        mx|Label {
            fontFamily: embGeorgiaCFF;
            textFieldClass: ClassReference("mx.core.UITLFTextField");
        s|RichText {
            fontFamily: embGeorgiaCFF;
            fontLookup: embeddedCFF;
    </fx:Style>
    <mx:Label text="Halo Label" />
    <mx:Label text="Halo Label (bold)" fontWeight="bold" />
    <s:RichText text="Spark RichText" />
    <s:RichText text="Spark RichText (bold)" fontWeight="bold" />
</s:Application>
Peter

Using HTML text with an embedded font in Flex 4

I have spent a day searching the interwebs and have not found a working example of how to use an embedded font with html formatting.
Anybody know if it can even be done??

Should be doable, but all fonts used in the html have to be embedded, and
one of the fonts should be specified as the fontFamily for the component.

Fully embedding fonts in PDF

Hi,
I had a piece of information but I can't seem to find it anymore so I have to ask ...
This is about understanding limitations of fully embedding fonts in a PDF (from Indesign Server). Actually it's about one limitation in particular. I know fonts with licensing issues or fonts that are marked "embedded not allowed" will not be embedded. Also, there is a threshold that I need to set.
So, I recall reading somewhere that Indesign will not fully embed "standard" fonts. Is that correct and what is this standard fonts category?
Oh, reading through some posts, I noticed lots of people and experts ask why does one need fully embedded fonts. That's a good question and I don't know the root reason but in my case it seems that some regulatory agencies (in the life sciences/pharma domain) require PDFs with fully embedded fonts.
Many thanks
Cristian

On behalf of Adobe:
(1)     For both InDesign “PDF export” (including InDesign Server) and Illustrator “save as PDF” functions, most but not all of the .joboptions file font embedding options are totally and utterly ignored. The options that are ignored are the Embed all fonts, Embed OpenType fonts, Always embed, and Never embed. Those options are observed by Distiller and the PDFMaker components of Acrobat.
(2)     These applications will attempt to embed all fonts referenced by the document, regardless of the settings of the .joboptions file. The only reason why a font would not be embedded in a PDF file would be if (a) the font was unavailable (i.e., not installed on the system) or (b) the font's embedding permissions do not permit embedding for at least preview and print privileges. Thus, if you use the so-called Standard .joboptions (strongly not recommended for any graphic arts purposes), even the base 14 fonts (four faces each of Helvetica, Times, and Courier along with Symbol and ITC Zapf Dingbats will be embedded if your document references them.
(3)     The subset threshold value of 0 (zero) may effectively cause all the glyphs of a font to be embedded in some, but not all cases. This will work for many if not most Type 1 fonts and some smaller TrueType and OpenType CFF fonts. Note that embedding all glyphs in a font is not the same as embedding a full font. For OpenType and TrueType fonts, InDesign and Illustrator never embed all the tables of the font. Such unembedded tables include those used for pair kerning, advanced OpenType features (such as ligatures, alternate representations, contextual alternates, small caps, old style figures, etc.), and extended metrics.
(4)     There are plenty of bubbameissas out there with regards to the benefits or liabilities of either fully embedding or subset embedding fonts. What is true is that: (a) Acrobat never uses the embedded font for text editing - you must have the font installed on the system in order to do such edits. (b) Subset embedding or not is totally irrelevant to what a RIP does when rendering text, either for PostScript or direct PDF RIPs. Neither subset or full embedding is any more reliable than the other and the specifications of PostScript and PDF do not permit the RIP to replace the embedded font with a font with a similar name - urban legend notwithstanding!!!! (c) Third party plug-ins to Acrobat or applications that claim to allow you to edit PDF files with embedded fonts may be illegally letting you do so if the embedding permissions do not permit embedding for editable embedding or installable embedding - most fonts do not provide such embedding permissions and since the fonts are missing metric information, such editing may be somewhat lacking in quality or features.
(5)     In fact some very non-tech-savvy organizations have posted requirements for full embedding of fonts in submitted PDF files (I have personally seen one such requirement by some international bureaucracy). They can post such bone-headed requirements based on limited understanding of PDF and PDF workflows, but that doesn't mean that anybody actually provides such PDF files. If in fact you run into such requirements, I would appreciate it if references to same can be forwarded to my attention by private message on these forums.
          - Dov

Embedded font not working in Spark Label control?

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1014" minHeight="768"
    backgroundColor="#7B7374">
    <s:layout>
        <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: HaloSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: SparkSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
            embedAsCFF: true;
        .mySparkSans {
            fontFamily: SparkSans;
            fontSize: 24;
        .myHaloSans {
            fontFamily: HaloSans;
            fontSize: 24;
    </fx:Style>
    <s:SkinnableContainer>
        <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
        <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
    </s:SkinnableContainer>
</s:Application>

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1014" minHeight="768"
    backgroundColor="#7B7374">
    <s:layout>
        <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: HaloSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: SparkSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
            embedAsCFF: true;
        .mySparkSans {
            fontFamily: SparkSans;
            fontSize: 24;
        .myHaloSans {
            fontFamily: HaloSans;
            fontSize: 24;
    </fx:Style>
    <s:SkinnableContainer>
        <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
        <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
    </s:SkinnableContainer>
</s:Application>

Embedding fonts with CSS

Similar Messages

Maybe you are looking for