2 Replies Latest reply on Oct 23, 2008 11:28 AM by Chris Mauger

    Adding additional fonts to RichTextEditor

    öhr-nest
      Hi,

      i'm quite new to flex and trying to customize a richtexteditor element. now i'd like to add more fonts to the richtexteditor, is this possible and if yes how?

      at the moment i embedded the font, but how can i import it to the rte?

      quote:

      [Embed(source='BOD_R.TTF', fontName='Bodoni MT', mimeType='application/x-font', flashType='true')] private var myFont:Class;
        • 1. Re: Adding additional fonts to RichTextEditor
          Chris Mauger
          I can't get this to work either. This surprisingly, seems to be a huge hole in Flex. The RTE can be assigned 1 embedded font, through the RTE's fontfamily attribute. But, if you utilize the fontfamilyarray, your embedded fonts, if they are non-system fonts, are basically ignored. I've search high and low, and noboday has a fix for this. I saw a posting on the flex bug's web site, but someone said it was supposed to act this way... Which really throws me for a loop, so basically its supposed to be broken then. Below is a reference to what I've been able to do. I think I'm pretty close, but of course nobody actually knows how to get multiple (non-system) fonts to work in the RTE.

          <mx:Style>
          @font-face {
          src:url("AABIGFICTION.swf");
          fontFamily: "AABIGFICTION";
          }
          @font-face {
          src:url("Baskerville_Old_Face.swf");
          fontFamily: "Baskerville_Old_Face";
          }

          </mx:Style>

          <mx:Script>
          <![CDATA[
          private function returnHandler():void {

          RTE.fontFamilyArray = ["AABIGFICTION", "Baskerville_Old_Face"];
          }
          ]]>
          </mx:Script>

          <mx:RichTextEditor id="RTE" title="Title" width="440" height="368" creationComplete="returnHandler();">


          *NOTE*
          *IF you assign the fontFamily within the RTE to 1 of the embedded non-system fonts, it will render the font.
          *Below AAGBIGFICTION will show, but you will not be able to use any other font.
          ****
          <mx:RichTextEditor id="RTE" title="Title" width="440" fontFamily="AABIGFICTION" height="368" creationComplete="returnHandler();">
          • 2. Re: Adding additional fonts to RichTextEditor
            Chris Mauger Level 1
            I just figured this one out. Make sure that if you embed a font, that every font used by the movie is embedded. Because if flex tries to use a font that is not embedded, Flex will automatically switch to using system fonts. IT WILL IGNORE YOUR EMBEDDED FONTS.

            In my project, I was embedding 2 non-system fonts. The Rich Text editor by default uses Verdana to display your text size, font, all the control components that belong to the Rich Text Editor... And since I didn't embed Verdana, Flex ignored my embedded fonts, and forced the movie to use Verdana. After I embedded the system font (Verdana) everything worked as expected.

            So this fixed the issue:

            @font-face {
            src:url("AABIGFICTION.swf");
            fontFamily: "AABIGFICTION";
            fontName: "AABIGFICTION";

            }
            @font-face {
            src:url("Baskerville_Old_Face.swf");
            fontFamily: "Baskerville_Old_Face";
            fontName: "Baskerville_Old_Face";

            }
            @font-face {
            src: local(Verdana);
            fontFamily: "Verdana";
            fontName: "Verdana";
            }