Embedding fonts for the Flex DateField control

by Peter deHaan on December 16, 2007

in DateChooser, DateField

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.

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: