August 13, 2010 - 2 comments

Embedding Fonts in Flex Rich Text Editor

Over the last couple of days I've been playing with the Rich Text Editor component in Flex, however when trying to use embedded fonts the editor seemed to switch to a default font. It appears that if you want to want to use custom/ embedded fonts in your project you also need to include the default Flex font (Verdana) in your styles declaration.

The reasoning is that if Flex tries to use a font that is not embedded, it will automatically switch to the use of system fonts. By default the Rich Text Editor uses Verdana, so in turn if you don't embed or locate Verdana, Flex will ignore your embedded fonts and switch to default system fonts, now for the code...

@font-face
{
src: url("assets/fonts/times.ttf");
font-family: Times;
advancedAntiAliasing: true;
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}


@font-face
{
src: url("assets/fonts/VIVALDII.ttf");
font-family: Vivaldii;
fontStyle: italic;
advancedAntiAliasing: true;
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}

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

Published by: nick in Flex, Uncategorized

Comments

puddytat
September 26, 2011 at 6:35 am

Alternatively you can set the default font of the RichTextEditor to an embedded font. This post helped me find that solution so thanks.

Leave a Reply to puddytat Cancel Reply