Flex Examples

The following example shows how you can embed fonts for use with the DateField control in Flex. Note that we embed both the normal and bold font weights since by default the month and year are bold in the DateChooser sub-component.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/16/embedding-fonts-for-the-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: "ComicEmbedded";
            fontWeight: normal;
            unicode-range: U+0030-U+0039, /* 0-9 */
                U+002F-U+002F; /* slash (/) */
        }

        @font-face {
            src: local("Comic Sans MS");
            fontFamily: "ComicEmbedded";
            fontWeight: bold;
            unicode-range:
                U+0030-U+0039, /* 0-9 */
                U+0041-U+0051, /* Uppercase A-Z */
                U+0052-U+007A; /* Lowercase a-z */
        }
    </mx:Style>

    <mx:DateField id="dateField"
            fontFamily="ComicEmbedded"
            color="red" />

</mx:Application>

View source is enabled in the following example.