Embed font in Textfield

  • Hi Klaus!

    This is what I'm doing but I can't get the embedded font to show in texfield

    I opened compile.bat from this folder: examples/as3-interface/plugin-sources/textfield/
    with a text editor

    then:

    1. download the Flex SDK from here: (use the latest production release) http://opensource.adobe.com/flexsdk/ DONE!
    2. extract the zip package anywhere DONE!
    3. edit the line below and set there the path where you have extracted the Flex SDK package: DONE!
    in my case it is:
    set FLEXSDKPATH=E:\krpano\flexSDK

    save .bat file


    ok no I open textfield.as and add this line:

    [Embed(source="fonts/Aladin-Regular.ttf", fontFamily="Aladin", mimeType='application/x-font' )] private var AladinFont:Class;

    I of course have the font saved in the folder fonts/Aladin-Regular.ttf, relative to textfield.as location.

    this is where I add the line:

    [SWF(width="400", height="300", backgroundColor="#000000")]
    public class textfield extends Sprite
    {
    [Embed(source="fonts/Aladin-Regular.ttf", fontFamily="Aladin", mimeType='application/x-font' )] private var AladinFont:Class;


    // krpano as3 interface

    private var krpano:krpano_as3_interface = null;
    ...


    Ok, now I save textfield.as and double click compile.bat
    I get a textielf.swf file in the same directory. no errors in cmd window.

    now I take my krpano xml.
    in CSS properties of my textfield, I change font-family to "Aladin" wich is the name of my font.

    now open the tour, and I get the default font, not the one I want to embed.


    Can someone help me with this and let me know where am I failing?

    thanks a lot! =)

  • ok! I Found the solution! *smile*

    we have to enable the embedded font of the textfield

    I did it this way... please, if someone knows better than me, let me know if there's a better place to set this up:

    in textfield.as

    this is the correct Embed code:

    [Embed(source="MyFont.ttf", fontFamily="MyFontFamilyName", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var MyFontClass:Class;

    Now scroll down the file. Like around line 360, you will see this function: private function updateHTML():void
    a few lines more and you'll see these two settings:

    css.parseCSS( cssdata );
    txt.styleSheet = css;
    right after these, copy and paste the following:

    txt.embedFonts = true;
    txt.antiAliasType = AntiAliasType.ADVANCED;


    txt.embedFonts = true; will enable the embeded fonts so it's able to set the font by CSS data.
    txt.antiAliasType = AntiAliasType.ADVANCED; will set the antialiased type to Advanced, so the characters look smooth.


    =) that's it... I hope this helps someone save the hours I just lost figuring this out.

  • Thanks for sharing,

    so, i've compiled my custom textfield.swf with an embbeded font
    (by the way source file textfield.as is 1.08.12, i don't know if there a more recent version available ? )

    but something not working :
    in my modified .as file, there :

    Code
    [Embed(source="MyriadWebPro.ttf", fontFamily="Myriad", fontWeight="normal", mimeType='application/x-font' )]
    and , as mentionned above :
    txt.embedFonts = true; // will enable the embeded fonts so it's able to set the font by CSS data.
    txt.antiAliasType = AntiAliasType.ADVANCED; // will set the antialiased type to Advanced, so the characters look smooth.
    				//

    in my xml :
    if i add a css line in plugin like this :

    Code
    css="color:#666666; font-family:Myriad; font-size:12; font-weight:normal; text-align:center; text-decoration:none;


    i see nothing,
    if i remove this line, then custom textfield display a replacement font , not the embedded one *angry*

    any suggestion ?

    Thanks

    z *smile*

  • Hi,

    in your source you have embedded only the 'bold' font but in your posted css you were trying to use the 'normal' font,

    note - normal, bold, italic and bold-italic are different fonts!

    when you only embed the bold one (marked by fontWeight="bold") then you only use that one,
    embed all kind of font styles to be able to use all of them (same fontFamily but different fontWeight)

    best regards,
    Klaus

  • Archive.zip

    Hi,

    still not working,

    Zitat

    in your source you have embedded only the 'bold' font but in your posted css you were trying to use the 'normal' font


    in fact i've tried with the different font, at different times, and at the time they were matching

    Zitat

    note - normal, bold, italic and bold-italic are different fonts!


    *whistling* i know, i know

    there definetly something with the css line in .xml , in my plugin tag :

    Code
    css="color:#666666; font-family:Myriad; font-size:12; font-weight:normal; text-align:center; text-decoration:none;"


    once i apply this line, no font show up, if i remove, the standard font show up *angry*

    may be there a typo somewhere ???
    by the way i remind you that i use 1.08.12 version of Textfield.as, i don't have a 1.0.8.14, in case there few changes....

    i include in zip file : the texfield.as and the new textfield.swf with both embedded bold and regular MyriadWebPro Font,
    if you can make a working example with that, you'll be my hero *squint*


    Thanks *smile*

    z

  • Fixed !

    it's working *thumbsup*

    it was the outdated textfield.as *smile*


    the combobox source file is also outdated in latest krpano package, we can download the latest source in "plugin" section of the website, but an older version is still in package,
    you should update it to avoid some thread like here...

    Thanks for your time and patience

    z *smile*

  • Hello, I tried to embed a font in textfield plugin, but when I do so I have no text dislpayed anymore... even if I dont set a font-family in the css ?

    line 36 : [Embed(source="champagne.ttf", fontFamily="champagne", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var champagneClass:Class;

    line 384 : css.parseCSS( cssdata );
    txt.styleSheet = css;
    txt.embedFonts = true;
    txt.antiAliasType = AntiAliasType.ADVANCED;

    http://www.360images.fr/textfield.zip

    Thanx for looking !

  • Hi Ariel,

    Thanks so much for you workflow on how to embed fonts, it's working pretty well !!

    If we want to embed more than one font we just have to duplicate that :

    Code
    [Embed(source="DroidSans.ttf", fontFamily="droidsans", fontWeight="normal", mimeType='application/x-font', embedAsCFF="false" )] private var Droidfont:Class;
    [Embed(source="DroidSans-Bold.ttf", fontFamily="droidsans", fontWeight="bold", mimeType='application/x-font', embedAsCFF="false" )] private var Droidboldfont:Class;

    Or we can make it somehow different ?

    thanks in advance

  • Hello !

    I'm gone into large troubles trying to embed fonts.

    I get the embeddedfonts.zip that provides flex-SDK 4.1 and file to compile SWF.

    I tried to embed a "Vivaldi Italic" font into a SWF file using this code:

    But I went into an error:

    Code
    compile embeddedfonts.swf...
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): Error: exception during transcoding: Unexpected exception encountered while reading font file '/G:/ToDo/ArtEtThe/EmbeddedFont/VIVALDII.TTF'
                	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: unable to build font 'Vivaldi'
                	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;  ^
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: Unable to transcode VIVALDII.TTF.  ^

    Looking arround the web, if found that a solution is to declare managers using "-managers=flash.fonts.AFEFontManager" compilation parameter.
    But using so, Igot a new error:

    Code
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): Error: exception during transcoding: No FontManager provided. Cannot build font.
                	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: unable to build font 'Vivaldi'
                	[Embed(source="VIVALDII.TTF",   fontName="Vivaldi", fontWeight="normal", fontStyle="normal", unicodeRange="U+0020-U+00FF", mimeType="application/x-font", advancedAntiAliasing="true", embedAsCFF="false")] private var embeddedfont_VivaldiNormal   : Class;  ^
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as(19): col: 3: Error: Unable to transcode VIVALDII.TTF.  ^

    Thus, I decided to update Flex-SDK to 4.6, I removed the "managers" param and I compiled again:

    Code
    compile embeddedfonts.swf...
    G:\ToDo\ArtEtThe\EmbeddedFont\embeddedfonts.as: Avertissement: Cette unitÚ de compilation ne disposait pas d'entrÚe factory Class indiquÚe dans les mÚtadonnÚes Frame en vue de charger les bibliothÞques d'exÚcution partagÚes configurÚes. Pour compiler sans bibliothÞque d'exÚcution partagÚe, dÚfinissez l'option -static-link-runtime-shared-libraries sur vraie ou dÚsactivez l'option -runtime-shared-libraries.
    
    
    Appuyez sur une touche pour continuer...

    This globally says I'm missing some shared librairies and to make use of another compilation param.

    Then it worked: I got a embeddedfonts.swf.

    I placed it in a folder close to my pano SWF and modified my XML to look like this:

    Code
    <plugin url="%SWFPATH%/plugins/embeddedfonts.swf" preload="true" keep="true" devices="flash" />
    <layer name="text" embeddedfonts="true" url="%SWFPATH%/plugins/textfield.swf"
      	handcursor="false" children="false" align="lefttop" x="0" y="0" autoheight="true" background="false" html="data:page1"
      	css="font-family:Vivaldi;" handcursor="true" onclick="if(hotspot[menuPage2].flying == 1.0, closeMenu());"/>

    But the text is still in arial....

    To test the textfield bahaviour, I removed Vivaldi from my system. If I set it back, the text in textfield appears well using Vivaldi. thus from the system and not from the embedded file.

    Some help?

    I tried also to make embeddedfonts.swf from several other method I discoverred over the web: using SWFMill (nothing happens) and using HaXe extension hxswfml.n ... None of them solved my problem. I can't event try and check my SWF file is correct or not.

    (Note: The AS file includes a command "krpano.trace(1,'Registering fonts...')" which appears in my tracelog when I start the viewer.)

    Any help?

    Regards,

    Paul

    « Quidquid latine dictum sit, altum sonatur »
    Pentax stuff.

  • Hello,

    Changing my computer seams to have solved the compilation issues.

    Using only Textfield package compilation scripts work fine now. EmbeddedFonts.swf compiles.

    But when I import this new file into my XML and set "embeddedfonts" to "true", the textfield does not display. The documentation tells me that means the font is not embedded.

    Someone went into this weird behaviour?

    Details: when I compile the provided files without modifying them (no change to font name or reference), I run into the same trouble : no textfield... :(

    Paul

    « Quidquid latine dictum sit, altum sonatur »
    Pentax stuff.

  • I finally get it working.

    My CSS description was not compliant.

    It failed with: (which works perfectly when no embedded font used)

    Code
    css="*{font-family: myFont; font-size:14px;} h1{font-size:22px;} a{color:#229922;text-decoration:underline;cursor:pointer;}"

    And worked with:

    Code
    font-family: myFont; font-size: 14px;

    My problem is now I cannot format headers and so...

    Paul

    « Quidquid latine dictum sit, altum sonatur »
    Pentax stuff.

  • With old Textfield plugin, I can fix the global font issue using

    Code
    <font face="xxx">blablabla</font>

    But with the new texfield (1.17.1), using font-face just hide the text.

    If It got it right: we can't use several fonts at a time in the same text... :(

    Paul

    « Quidquid latine dictum sit, altum sonatur »
    Pentax stuff.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!