Embedded fonts & htmlText

I'm trying to use embedded fonts in htmlText. I've embedded the font in the Style tag:
 @font-face {
 src: url("someFont.ttf");
 fontFamily: "myFont";
Now if I add it to a Text component like:
 <mx:Text id="myText" htmlText="This is some text" fontFamily="myFont" />
it all works fine. If I try to use the tag inside the htmlText like
 myText.htmlText = "This is some text";
with a component <mx:Text id="myText" /> it doesn't work. If I use a font that's not embedded like
 myText.htmlText = "This is some text";
it works fine. So my question: how can I use the tag in htmlText with embedded fonts?

The underlying flash.text.TextField that actually does the display of text needs to have a flag flipped to tell it to use embedded fonts. By specifying an embedded fontFamily in the MXML, the Flex framework figures out that it is embedded and flips that flag.
If you want to use different font tags in your html, all of the fontFamily specified must be in the same SWF and all must be embedded. Then specify in the MXML one of the embedded fonts and override that font with the font tags in the html. You can also call setStyle("fontFamily", "myFont") before setting the htmlText in ActionScript.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Similar Messages

Using italics within Htmltext with embedded fonts

hi there guys, I've been trying to use embedded fonts within my htmlText. However, it seems like it only shows the bold/normal fonts and it ignores the italics. The italics part of htmlText shows up as normal weight/ normal style font.
Here's what I am doing (am i doing anything wrong?):
I embed my fonts within a .css file:
@font-face {
 src: local("Verdana");
 fontFamily: myFontFamily;
 advancedAntiAliasing: true;
 fontWeight: bold;
 fontStyle: italic;
@font-face {
 src: local("Verdana");
 fontFamily: myFontFamily;
 advancedAntiAliasing: true;
 fontWeight: normal;
 fontStyle: italic;
@font-face {
 src: local("Verdana");
 fontFamily: myFontFamily;
 advancedAntiAliasing: true;
 fontWeight: normal;
 fontStyle: normal;
@font-face {
 src: local("Verdana");
 fontFamily: myFontFamily;
 advancedAntiAliasing: true;
 fontWeight: bold;
 fontStyle: normal;
Then i use it within this Text component:
<mx:Text width="100%" color="blue" fontFamily="myFontFamily" f>
 <mx:htmlText>
 <![CDATA[
 This text is 10 point black, italic, and bold.
 ]]>
 </mx:htmlText>
 </mx:Text>

http://cookbooks.adobe.com/post_Using_rich_HTML_text_formatting_with_embedded_font-16974.h tml

Text display issues with htmlText, Embedded Font

Hey All,
I'm having an issue with the display of my hyperlinks in a
textfield that is using embedded fonts. It offsets the hyperlinks
to the left along the line they are on and the underline doesn't
stretch all the way under the text field. The text display normally
when I don't embed the font. For some reason I think this might
have to do with the embedded character range so I opened it up.
Does anyone know if this range is enough or if there are special
characters flash uses that need to be embedded for their width even
though they arn't displayed.
Embedded range:
[Embed(source='MyriadPro-Regular.otf', fontName='Myriad Pro',
unicodeRange='U+0000-U+00fe')]
Here's a link to the related code:
http://pcpnew.privatepaste.com/a7eKaAuCTt

Any ideas?

Embedding Font in FB 4.7 AIR 3.9

Hello,
Is there a different way to embed fonts with Air 3.9 or FB 4.7? I've recently upgrading and I am experience tempremental results with embedding fonts.
With FB 4.6 and Air 3.7 the following works fine -
[Embed(source="/assets/fonts/SEGOEUIL.TTF", fontName="Segoe UI Light", mimeType="application/x-font-truetype")]
                    public static var EverydayFont:Class;
                                        var textFormat:TextFormat = new TextFormat();
                                        var mainFont:Font = new EverydayFont();
                                        textFormat.font = mainFont.fontName;
                              var textfield:TextField = new TextField();
                              textfield.mouseEnabled = false;
                              textfield.selectable = false;
textfield.defaultTextFormat = textFormat;
                              textfield.multiline = false;
                              textfield.border = true;
                              textfield.embedFonts = embedFont;
                              textfield.width = width;
textfield.antiAliasType = antiAliasStyle;
                              textfield.htmlText = label;
However now with the latest versions the text box is just blank..??

Ok, I'm gonna give you the code that worked for me when I was working on a project back than, cause I also had a simillar, if not the same (can't remember), problem.
So here it goes:
[Embed(source="SuchFont.ttf", fontName="SuchFont", mimeType="application/x-font", embedAsCFF="true")]
public static var SuchFont:Class;
var font:Font = new SuchFont;
var format:TextFormat = new TextFormat(font.fontName, 20, 0xFFFFFF, true, null, null, null, null, TextAlign.LEFT);
awesomeText = new TextField;
awesomeText.defaultTextFormat = format;
awesomeText.embedFonts = true;
awesomeText.width = 158;
awesomeText.height = 56;
awesomeText.x = 106;
awesomeText.y = 420;
I think the trick is using embedAsCFF="true", but the issue here could be that you're using htmlText, have you tried with text?

Embedded Fonts and HTML Text

I am attempting to use a non-standard font in an HTML dynamic textbox using the tag. I have embedded this font using the textbox properties box and the fonts appear in the library. According to previous posts to this form, that should do it. But, my fonts are not appearing correctly. Any advice?

OK,
I have given up messing with stylesheets, trying display:
block, inline, different ways of formatting the XML, messing with
XML.ignoreWhiteSpace, and XML.prettyPrinting etc.
I went down the route of encodeURI, using a RegExp to strip
out all tabs, linefeeds and carriage returns. This now gives
consistent results for all situations, even embedded and none
embedded fonts.
e.g.
_text:String = TEXT FROM XML, HTML TEXT etc
var st:String = encodeURI(_text);
var pattern:RegExp = /(%09)+|(%0A)+|(%0D)+/g;
st = st.replace(pattern, "");
st = decodeURI(st);
YOUTEXTFIELD.htmlText = st;
The tags still behave as a tag, but you
can add an extra to simulate a paragraph.
Here is the example again with the updates,
Hope this helps someone

Gumbo text elements and embedded fonts

Hi again,
ok I found the solution. The first time, I searched in the "CSS Advanced Selectors" spec document for the solution and I found nothing about it. Then I had the "great" idea to look in the only right place which is of course "Text Primitives (TextBox, TextGraphic, and TextView)". There I found the hint about "DefineFont4" which, with some search, led me to the solution:
1. Add the new property "cff: true" in the "@font-face" css block
2. Set the property fontLookup="embeddedCFF" for the text element
et voilÃ !
I hope this will save somebody else some time!
Haykel Ben Jemia
Allmas
Web & RIA Development
http://www.allmas-tn.com

OK,
I have given up messing with stylesheets, trying display:
block, inline, different ways of formatting the XML, messing with
XML.ignoreWhiteSpace, and XML.prettyPrinting etc.
I went down the route of encodeURI, using a RegExp to strip
out all tabs, linefeeds and carriage returns. This now gives
consistent results for all situations, even embedded and none
embedded fonts.
e.g.
_text:String = TEXT FROM XML, HTML TEXT etc
var st:String = encodeURI(_text);
var pattern:RegExp = /(%09)+|(%0A)+|(%0D)+/g;
st = st.replace(pattern, "");
st = decodeURI(st);
YOUTEXTFIELD.htmlText = st;
The tags still behave as a tag, but you
can add an extra to simulate a paragraph.
Here is the example again with the updates,
Hope this helps someone

Apply html tag to embedded fonts

hi,
i have a textfield, i embedded fonts and assigned htmlText, i.e.
txt.embedFonts = true;
txt.htmlText = 'my text ';
but it doesnt aplly html tags because of embedFonts... i tried to make style using css but didnt work....
is there any way to accomplish this?

I dont know it its possible in this way. I would load a text file with the html and another with the style as described here :
http://www.republicofcode.com/tutorials/flash/as3css/

Embedded fonts no longer work

My website uses embedded fonts and in all previous versions of Firefox those fonts are correctly displayed. In Firefox 5 these embedded fonts are no longer displayed.

Tim,
I think both issues you're seeing are the same problem, as I believe the htmlText property uses the TextFieldHTML filter. But I haven't been able to reproduce either issue yet.
When I set htmlText using the same font as I specified on the stage (or I omit the font tag entirely) I'm seeing antialiased text. If I use a font in the markup that's different than what I specified on the stage I'm getting a fallback font that's antialiased. The fact that I get a fallback font (even when I specify a font I have installed) suggests to me that it's still trying to use an embedded font after the htmlText property is set.
What happens for you if you do not have a font tag in your HTML? If that looks better there may be a mismatch between font names between the markup and embedding.
Alan

Embedded Font Frustration

Hi
I am going round in circles with embedded fonts! I am using Flash on a Mac. When I embed my fonts and publish all looks good, I have embedded GG Superscript Sans and GG Subscript Sans. I am using Arial (not embedded). I have drawn text boxes and used the check options
When viewing the site in Safari on the Mac I get perfection, subs, supers and bold. But in Windows (and Puffin on my iphone) the subs and supers do not show up. The bold does ( tag in external text file).
The AS3 code in the flash swf is;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import flash.text.StyleSheet;
// requests
var c21specheadReq:URLRequest = new URLRequest("c21spechead.txt");
var c21specbox1Req:URLRequest = new URLRequest("c21specbox1.txt");
var c21specbox2Req:URLRequest = new URLRequest("c21specbox2.txt");
var cssReq:URLRequest = new URLRequest("styles.css");
// loaders
var c21specheadLoader:URLLoader = new URLLoader();
var c21specbox1Loader:URLLoader = new URLLoader();
var c21specbox2Loader:URLLoader = new URLLoader();
var cssLoader:URLLoader = new URLLoader();
// listeners
c21specheadLoader.addEventListener(Event.COMPLETE, c21specheadLoaded);
c21specbox1Loader.addEventListener(Event.COMPLETE, c21specbox1Loaded);
c21specbox2Loader.addEventListener(Event.COMPLETE, c21specbox2Loaded);
cssLoader.addEventListener(Event.COMPLETE, cssLoaded);
function c21specheadLoaded(event:Event):void {
 txtspec_txt.htmlText = c21specheadLoader.data;
function c21specbox1Loaded(event:Event):void {
 txtbox1_txt.htmlText = c21specbox1Loader.data;
function c21specbox2Loaded(event:Event):void {
 txtbox2_txt.htmlText = c21specbox2Loader.data;
function cssLoaded(event:Event):void {
 var sheet:StyleSheet = new StyleSheet();
 sheet.parseCSS(cssLoader.data);
 txtspec_txt.styleSheet = sheet;
 txtbox1_txt.styleSheet = sheet;
 txtbox2_txt.styleSheet = sheet;
// Load the files
c21specheadLoader.load(c21specheadReq);
c21specbox1Loader.load(c21specbox1Req);
c21specbox2Loader.load(c21specbox2Req);
cssLoader.load(cssReq);
The text file looks like this;
(g) When atoms share pairs of electrons, they form covalent bonds.
These bonds between atoms are strong.
Some covalently bonded substances consist of simple molecules such as
H2,
Cl2,
O2,
HCl, H2O,
NH3
and CH4.
Others have giant covalent structures (macromolecules), such as diamond and silicon dioxide.
(i) The electrons in the highest occupied energy levels (outer shell)
of metal atoms are delocalised and so free to move through the whole structure.
This corresponds to a structure of positive ions with electrons between the
ions holding them together by strong electrostatic attractions. 
The stylesheet is embarrassingly small!
body {
background-color: white;
font-family:'Arial';
img {
border-width: 0;
I'm trying for functionality before I decorate.
Frustratingly, when playing with the checkboxes for the property inspecto for my text box I DID create a version that had subscript and superscript working in BOTH windows and mac browsers; BUT the BOLD stopped at that point.
Very frustrating.
I'd be delighted if someone could point me to a solution.
Thanks
Mark

OK - it now works using Puffin Browser on my iphone, which seems to produce the same results as Windows browsers.
I have changed to a TT font (Garamond) and embedded regular and bold versions.
Very odd that this now cures the sub super problem.
Lesson learned; embed all fonts used, slightly more cumbersome swf but functional.
Now to look through the fonts for one that I like, Verdana is not my favourite!
Any logic to my solution would be grateful!
Mark

Trouble with Preview not using embedded fonts in a PDF

I have a client I'm working with that is generating PDF reports for various organizations in various languages. They are using an Arial Unicode font but are using different encoding for some of the more unique languages. To ensure the report will be viewable regardless of installed fonts, they are embedding the font.
Most of the languages are showing up fine in preview, but three languages are giving me trouble. Specifically Greek, Russian and Thai which are using encoding EL8MSWIN1253, CP1251, and TH8TISASCII.
Basically the question is whether there is some toggle that will tell Preview to use the embedded font? Or something we can put into the PDF (the pdf is created using FPDF) that will allow a user to know which font/encoding they'll need to install in order to properly view the document? (I'm actually trying to figure that out myself...which font I need to install to get preview to view the document properly).
Thanks in advance for any help.

Actually, I got that example to work... here are the changes
I made...
<mx:htmlText>
<![CDATA[You can vary the font
size, color, face, or any combination
of the three.]]>
</mx:htmlText>
As I said above, I have found errors in the code of the help
docs... this is yet another one of them. Usually its spaces in the
wrong place, or no space at all, or missing ) or ], or a case
sensitivity issue.
If you got your custom font to display, that should work...
but then again.. what should work, doesn't always.

Weird textinput behavior embedded font

I have this weird behavior with an embedded font in a textinput.
I have embedded the myriad font and aplied it on a textinput.
In this weird scenrio when i type "test configuration" in the textinput and then pres the left arrow key the cursors will not go further back than the letter n in the word configuration.
This behavior is only with some font types, like myriad or ubuntu.
Since i have no clue how to upload attachments to this forum i created a Box link
https://www.box.com/s/0boj6u2kgmwojbg9ubhd
In here i have a video of the behavior and a test project.

Not sure if this will help you, but in order to get my embedded fonts to render, I had to do:
                GlobalSettings.resolveFontLookupFunction = null;
                //setup text item from xml
                var res:XML = XML(xml.htmlText.children()[0]);
                var tf:TextFlow = TextFlowUtil.importFromXML(res,WhiteSpaceCollapse.PRESERVE);
                tf.renderingMode = RenderingMode.CFF;
                tf.fontLookup = FontLookup.EMBEDDED_CFF;
                txt.textFlow = tf;
                txt.textFlow.whiteSpaceCollapse = WhiteSpaceCollapse.PRESERVE;
                txt.textFlow.invalidateAllFormats();
The important lines ar the first and last.

Embeded Fonts and Externally Loaded Text?

Just curious, I am designing a site with two embeded fonts. I am also using many externally loaded textboxes styled by a CSS. When I use the inline HTML in the .txt file, can I specify the embeded fonts for the text boxes or will they just use default browser fonts?
Thanks in advance,
Jeff

I think what I need to do is place an instance of a text box on each page, so when you navigate away from the page the existing text box will leave. This works, but I can't get the CSS to do the formatting. Here is the code I have, any suggestions?
var fileTxt:String;
var myTextLoader:URLLoader = new URLLoader();
var cssLoader:URLLoader = new URLLoader();
myTextLoader.addEventListener(Event.COMPLETE, onLoaded);
myTextLoader.load(new URLRequest("text/tgc.txt"));
function onLoaded(e:Event):void{
    fileTxt=myTextLoader.data;
    callCss();
function callCss():void{
    var cssRequest:URLRequest=new URLRequest("styles.css");
    cssLoader.addEventListener(Event.COMPLETE, onCss);
    cssLoader.load(cssRequest);
function onCss(e:Event):void{
    var css:StyleSheet = new StyleSheet();
    css.parseCSS(cssLoader.data);
    tgc_txt.styleSheet=css;
    tgc_txt.wordWrap=true;
    tgc_txt.htmlText=fileTxt;
Like I said, it loads the text fine and eliminates the embeded HTML tags in the .txt file. It does not change color, size or weight as I have in the CSS.

Embedding fonts in Bridge (Photoshop CS5)

Hi folks!
I'm sorry for posting but I still have trouble with creating PDF via Bridge.
I have sveral PSD-Files (CS5 made) using several image- and textlayers.
Now I want to create multipage-PDF using Bridge that comes with PS CS5.
Works fine so far but Bridge does not embed those fonts used in the PSD!
Seems to me Bridge just merges all layers to one pixelbased image and saves it in PDF-format.
But that's no good deal!
In CS2 there was a much better solution in PS2 allowing to create multipaged PDF with embedded fonts.
Is there any chance to embed fonts with Bridge?
Plz don't tell me to use Acrobat or InDesign because I'm only using PS CS5.
Thx!

Which version of Camera Raw do you use (Photoshop > About Plug-In > Camera Raw) and which one is needed for that camera?
Camera Raw plug-in | Supported cameras

Unable to load embedded fonts in TlF / FlowLeafElement

dears,
I use TextFlowUtil.importFromString and FlowLeafElement to make each some text have its own style, every some words have diffirent color, fontFamily, fontSize....etc
that is done here in the text attribute in this xml tag, and TextFlowUtil.importFromString and FlowLeafElement make taht perfect:
<TextArea text="<div direction="rtl">
 
 Welcome to Android Training. Here you'll find a collection of classes that aim to help you build great apps for 
 Android, using best practices in a variety of framework topics.
 
 
 
 Each class explains the steps required to solve a problem or implement a feature using code snippets and 
 sample code for you to use in your apps.
 
 
 
 What you see now is just the beginning. We plan to add many more classes, expand and refine existing 
 classes, and build Training Courses that help you enhance your apps using objective-oriented collections of 
 classes.
 
</div>" direction="rtl" styleName=".textAreaTitle" editable="false" selectable="true" scrollable="false" mainReferance="UI.Components.Basics.TextArea" />
The problem is that i need to embed fonts, by this fontFamily="Arial" you can set font name which you want, but if i set font name which is embedded it won't work, like : fontFamily="ttf"
the embedded code is :
[Embed(source='/Resources/majallab.ttf',fontName='ttf',mimeType='application/x-font',embed AsCFF='true')]
var font1:Class; //This is only used to compile the code
I use Flex SDK 4.5,
what can i do ?
Thank you in advance,
amt

To use embedded fonts in a Flex component, the fontFamily for the component needs to be set to an embedded font that is in the same SWF as the other embedded fonts in the TextFlow. See my blog for more details
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui

Unable to load embedded fonts in Textlayout Framework using SWFContext.

Hi,
    We are having issues with embedding/renderring fonts in swf.
    Here is the code of the slide1.swf compiled by mxmlc.exe [Adobe Flex Compiler (mxmlc) Version 4.1.0 build 16076] with compiler parameters -- "-static-link-runtime-shared-libraries".
and checked with Flash player version 10.1 and 10.2 and 10.3.
    package
        import flash.display.Sprite;
        import flashx.textLayout.compose.ISWFContext;
        public class Slide1 extends Sprite implements ISWFContext
            [Embed(source="C:/WINDOWS/FONTS/CALIBRI.TTF", fontName="Calibri", embedAsCFF = "true", unicodeRange="U+0041,U+0072,U+0069,U+0061,U+006C,U+0020,U+004E,U+006F,U+006D", mimeType="application/x-font")]
            public static const calibri:Class;
            [Embed("slide1/sldBg1.png", mimeType="image/png")]
            public static const bg:Class;
            [Embed("slide1/slide1.xml", mimeType="application/octet-stream")]
            public static const slide:Class;
            public function callInContext(fn:Function, thisArg:Object, argsArray:Array, returns:Boolean=true):*
                if (returns)
                return fn.apply(thisArg, argsArray);
                fn.apply(thisArg, argsArray);
    Using Flex 4.1 SDK:--
        When I load the slide1.swf in ActionScript Project it shows the embedded text.
        But, when I load the slide1.swf in MX+Spark Flex Project, it gives an error :
        Warning: An ActionScript 1.0/2.0 SWF file has loaded an ActionScript 3.0 SWF; code in the ActionScript 3.0 SWF will not run.
       Error TypeError: Error #1034: Type Coercion failed: cannot convert Slide1@f56fce9 to mx.core.IFlexModuleFactory. !
        Below red colored text is the code where the exception occurs.
        var fontClass:Class = ApplicationDomain.currentDomain.getDefinition("slide1") as Class;
      textFlow.flowComposer.swfContext = new fontClass();
        textFlow.flowComposer.addController(new ContainerController(textContainer, containerWidth, containerHeight));
        textFlow.flowComposer.updateAllControllers();
        And, when I load the slide1.swf in Only MX Flex Poject, it shows the embedded Font.
    Using Flex 4.5 SDK:--
        With MX+ Spark and MX only Flex Project we get following errors
        VerifyError: Error #1053: Illegal override of createGeometry in flashx.textLayout.elements.FlowGroupElement.
        VerifyError: Error #1053: Illegal override of canReleaseContentElement in flashx.textLayout.elements.SubParagraphGroupElement.
        VerifyError: Error #1103: Class flashx.textLayout.elements::LinkElement cannot extend final base class.
        VerifyError: Error #1053: Illegal override of display in flashx.textLayout.elements.ContainerFormattedElement.
        VerifyError: Error #1053: Illegal override of canReleaseContentElement in flashx.textLayout.elements.FlowLeafElement.
        VerifyError: Error #1053: Illegal override of addParaTerminator in flashx.textLayout.elements.SpanElement.
        VerifyError: Error #1053: Illegal override of canReleaseContentElement in flashx.textLayout.elements.InlineGraphicElement.
        VerifyError: Error #1053: Illegal override of minPercentValue in flashx.textLayout.property.NumberOrPercentProperty.
        VerifyError: Error #1053: Illegal override of hash in flashx.textLayout.property.EnumStringProperty.
        VerifyError: Error #1053: Illegal override of hash in flashx.textLayout.property.BooleanProperty.
        VerifyError: Error #1053: Illegal override of minValue in flashx.textLayout.property.NumberProperty.
        VerifyError: Error #1014: Class flashx.textLayout.property::NumberProperty could not be found.
        VerifyError: Error #1053: Illegal override of minValue in flashx.textLayout.property.IntProperty.
        VerifyError: Error #1014: Class flashx.textLayout.property::IntProperty could not be found.
        VerifyError: Error #1053: Illegal override of hash in flashx.textLayout.property.UintProperty.
        VerifyError: Error #1014: Class flashx.textLayout.property::UintProperty could not be found.
        VerifyError: Error #1053: Illegal override of hash in flashx.textLayout.property.StringProperty.
        VerifyError: Error #1014: Class flashx.textLayout.property::NumberOrPercentProperty could not be found.
        VerifyError: Error #1053: Illegal override of hash in flashx.textLayout.property.ArrayProperty.
        VerifyError: Error #1103: Class flashx.textLayout.elements::TCYElement cannot extend final base class.
        VerifyError: Error #1053: Illegal override of createTextLine in flashx.textLayout.compose.ComposeState.

Hi Jin-Huang
          But when I use Simple ASProject with SDK 4.1 then it works fine but when I create Flex project then it give error
with SWFContext.
I think it's a issue of swfcontext or AS comunication with Spark components.
Please let me know if any solution.
Thanks

Embedded fonts & htmlText

Similar Messages

Maybe you are looking for