3 Replies Latest reply on Jul 12, 2011 2:14 PM by William Spence

    Embedded Font Debacle

    William Spence Level 1

      I have a textInput control that I would like to have a prompt displaying (Optional Text).  I have all of this set up and working nicely, but I want it to use a font that I embedded called Myriad Pro, and this is where my issue is occuring.  I created a folder in my project called fonts and copied Myriad Pro and pasted it into this folder.  In doing so, Flex breaks the font into all of its styles instead of keeping it as a whole.  The contents of the folder read as follows:

       

      MYRIADPRO-BOLD.OTF

      MYRIADPRO-BOLDIT.OTF

      MYRIADPRO-IT.OTF

      MYRIADPRO-REGULAR.OTF

      MYRIADPRO-SEMIBOLD.OTF

      MYRIADPRO-SEMIBOLDIT.OTF

       

      So to embed this font into my application, I had to embed each of these parts I wanted to include in my application separately as follows:

       

      @font-face{

      fontFamily: "MyriadProRegular";

      src:url("fonts/MYRIADPRO-REGULAR.OTF");

      advancedAntiAliasing:true;

      }

       

      @font-face{

      fontFamily: "MyriadProSemiBold";

      src:url("fonts/MYRIADPRO-SEMIBOLD.OTF");

      advancedAntiAliasing:true;

      }

       

      @font-face{

      fontFamily: "MyriadProBold";

      src:url("fonts/MYRIADPRO-BOLD.OTF");

      advancedAntiAliasing:true;

      }

       

      @font-face{

      fontFamily: "MyriadProItalic";

      src:url("fonts/MYRIADPRO-IT.OTF");

      advancedAntiAliasing:true;

      }

       

      Now back to the textInput.  I set the text input fontFamily to MyriadProRegular.  To create the prompt, Flex looks at the font family that you have selected and then chooses the italic style of that font and displays it for the prompt which is exactly what I want to have happen, but it doesn't.  Instead, Flex is looking at "MyriadProRegular", then looks for for the italic style but it isn't there because it has been embedded separately under a different name.  So instead, it just chooses a regular system font to display as the prompt which doesn't match well at all.

       

      So my questions are, is there a way to embed the font in its entirety under one name instead of under it's individual styles?  And if not, is there a way to force Flex to use a different font for the prompt than it does for the text?

       

      Thanks for any thoughts!

        • 1. Re: Embedded Font Debacle
          William Spence Level 1

          I think I may have figured it out myself.  I don't know if this is correct, but I tried it and it seems to be working.  When I embed each of the different font Styles, I embed each style all under the same fontFamily name and then changed the fontStyle and fontWeight properties for each of the various styles.  Then, when I need to use the font, I refer to it under the collective fontFamily name that I gave it and set the weight and style that I need in that particular instance.  So my embedding now looks like this:

           

           

                    @font-face{
                         fontFamily: "MyriadPro";
                         fontStyle: normal;
                         fontWeight: normal;
                         src:url("fonts/MYRIADPRO-REGULAR.OTF");
                         advancedAntiAliasing:true;
                    }
                    
                    @font-face{
                         fontFamily: "MyriadPro";
                         fontStyle: normal;
                         fontWeight: semibold;
                         src:url("fonts/MYRIADPRO-SEMIBOLD.OTF");
                         advancedAntiAliasing:true;
                    }
                    
                    @font-face{
                         fontFamily: "MyriadPro";
                         fontStyle: normal;
                         fontWeight: bold;
                         src:url("fonts/MYRIADPRO-BOLD.OTF");
                         advancedAntiAliasing:true;
                    }
                    
                    @font-face{
                         fontFamily: "MyriadPro";
                         fontStyle: italic;
                         fontWeight: normal;
                         src:url("fonts/MYRIADPRO-IT.OTF");
                         advancedAntiAliasing:true;
                    }
          

           

           

          Please let me know if this is wrong, but it seems to be working for me pretty well.

          • 2. Re: Embedded Font Debacle
            William Spence Level 1

            Oops.  I should add that there is no fontWeight in Flex for semibold fonts, only for bold and normal.  So for the semibold font, I will have to create a new font-family for this specific font.  That will work fine for me in this particular instance.

            • 3. Re: Embedded Font Debacle
              Karl_Sigiscar_1971 Level 3

              That's exactly right. The font family must be the same.

               

              Then you can use the <b> and <i> tags with the htmlText property and it will work with your embedded font.

               

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