Css font properties

CrossPlatformModules.csproj

@@ -440,7 +440,19 @@
       <DependentUpon>wrap-layout.d.ts</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="ui\styling\css-selector.d.ts" />
-    <TypeScriptCompile Include="ui\styling\css-selector.ts" />
+    <TypeScriptCompile Include="ui\styling\css-selector.ts">
+      <DependentUpon>css-selector.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\styling\font.android.ts">
+      <DependentUpon>font.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\styling\font.ios.ts">
+      <DependentUpon>font.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="ui\styling\font.d.ts" />
+    <TypeScriptCompile Include="ui\styling\font-common.ts">
+      <DependentUpon>font.d.ts</DependentUpon>
+    </TypeScriptCompile>
     <TypeScriptCompile Include="ui\styling\style-property.d.ts" />
     <TypeScriptCompile Include="ui\styling\style.ts" />
     <TypeScriptCompile Include="ui\styling\visual-state.ts" />
@@ -604,6 +616,7 @@
     <Content Include="apps\template-master-detail\main-page.minWH600.xml" />
     <Content Include="apps\template-settings\app.css" />
     <Content Include="apps\tests\app\location-example.xml" />
+    <TypeScriptCompile Include="apps\tests\pages\fonts-test.ts" />
     <Content Include="apps\tests\pages\page-load-performance\start.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -611,6 +624,7 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\tests\pages\page-load-performance\test-small.xml" />
+    <Content Include="apps\tests\pages\fonts-test.xml" />
     <Content Include="apps\tests\pages\page18.xml" />
     <Content Include="apps\tests\ui\bindingContext_testPage.xml" />
     <Content Include="apps\tests\ui\bindingContext_testPage1.xml" />
@@ -1594,7 +1608,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/tests/pages/fonts-test.ts

@@ -0,0 +1,15 @@
+import stack = require("ui/layouts/stack-layout");
+import style = require("ui/styling/style");
+
+export function buttonTap(args) {
+    var stackLayout = <stack.StackLayout>args.object.parent;
+
+    for (var i = 0; i < stackLayout.getChildrenCount(); i++){
+        var v = stackLayout.getChildAt(i);
+        v.style._resetValue(style.fontFamilyProperty);
+        v.style._resetValue(style.fontSizeProperty);
+        v.style._resetValue(style.fontStyleProperty);
+        v.style._resetValue(style.fontWeightProperty);
+        v.style._resetValue(style.fontProperty);
+    }
+}

apps/tests/pages/fonts-test.xml

@@ -0,0 +1,41 @@
+<Page>
+  <ScrollView>
+    <StackLayout id="stack">
+      <Button text="RESET" tap="buttonTap"/>
+
+      <Label text="Label: normal" />
+      <Label text="Label: size"        style="font-size: 32" />
+      <Label text="Label: italic"      style="font-style: italic" />
+      <Label text="Label: bold"        style="font-weight: bold"/>
+      <Label text="Label: bold-italic" style="font-weight: bold; font-style: italic"/>
+      <Label text="Label: times new"   style="font-family: Times New Roman"/>
+      <Label text="Label: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
+
+      <Button text="Button: normal" />
+      <Button text="Button: size"        style="font-size: 32" />
+      <Button text="Button: italic"      style="font-style: italic" />
+      <Button text="Button: bold"        style="font-weight: bold"/>
+      <Button text="Button: bold-italic" style="font-weight: bold; font-style: italic"/>
+      <Button text="Button: times new"   style="font-family: Times New Roman"/>
+      <Button text="Button: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
+
+      <TextView text="TextView: normal" />
+      <TextView text="TextView: size"        style="font-size: 32" />
+      <TextView text="TextView: italic"      style="font-style: italic" />
+      <TextView text="TextView: bold"        style="font-weight: bold"/>
+      <TextView text="TextView: bold-italic" style="font-weight: bold; font-style: italic"/>
+      <TextView text="TextView: times new"   style="font-family: Times New Roman"/>
+      <TextView text="TextView: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
+
+      <TextField text="TextField: normal" />
+      <TextField text="TextField: size"        style="font-size: 32" />
+      <TextField text="TextField: italic"      style="font-style: italic" />
+      <TextField text="TextField: bold"        style="font-weight: bold"/>
+      <TextField text="TextField: bold-italic" style="font-weight: bold; font-style: italic"/>
+      <TextField text="TextField: times new"   style="font-family: Times New Roman"/>
+      <TextField text="TextField: all in one"  style="font-family: Times New Roman; font-weight: bold; font-style: italic; font-size: 32" />
+
+
+    </StackLayout>
+  </ScrollView>
+</Page>

ui/enums/enums.d.ts

@@ -370,4 +370,36 @@
          */
         export var popup: string;
     }
+    
+    /**
+     * Specifies different font styles.
+     */
+    export module FontStyle {
+        /**
+         * Normal font style.
+         */
+        export var normal: string;
+        
+        /**
+         * Italic font style.
+         */
+        export var italic: string;
+    }
+    
+    
+    /**
+     * Specifies different font weights.
+     */
+    export module FontWeight {
+        /**
+         * Normal font weight.
+         */
+        export var normal: string;
+        
+        /**
+         * Bold font weight.
+         */
+        export var bold: string;
+    }
+    
 }

ui/enums/enums.ts

@@ -102,4 +102,14 @@ export module MenuItemPosition {
 export module ImageFormat {
     export var png: string = "png";
     export var jpeg: string = "jpeg";
-}
+}
+
+export module FontStyle {
+    export var normal: string = "normal";
+    export var italic: string = "italic";
+}
+
+export module FontWeight {
+    export var normal: string = "normal";
+    export var bold: string = "bold";
+}

ui/styling/font-common.ts

@@ -0,0 +1,71 @@
+import enums = require("ui/enums");
+import definitios = require("ui/styling/font");
+
+export class Font implements definitios.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _fontFamily: string;
+    private _fontStyle: string;
+    private _fontWeight: string;
+
+    get fontFamily(): string {
+        return this._fontFamily;
+    }
+    set fontFamily(value: string) {
+        throw new Error("fontFamily is read-only");
+    }
+
+    get fontStyle(): string {
+        return this._fontStyle;
+    }
+    set fontStyle(value: string) {
+        throw new Error("fontStyle is read-only");
+    }
+
+    get fontWeight(): string {
+        return this._fontWeight;
+    }
+    set fontWeight(value: string) {
+        throw new Error("fontWeight is read-only");
+    }
+
+    get isBold(): boolean {
+        return this._fontWeight.toLowerCase() === enums.FontWeight.bold;;
+    }
+    set isBold(value: boolean) {
+        throw new Error("isBold is read-only");
+    }
+
+    get isItalic(): boolean {
+        return this._fontStyle.toLowerCase() === enums.FontStyle.italic;;
+    }
+    set isItalic(value: boolean) {
+        throw new Error("isItalic is read-only");
+    }
+
+    get ios(): UIFontDescriptor {
+        return undefined;
+    }
+
+    get android(): android.graphics.Typeface {
+        return undefined;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        this._fontFamily = family;
+        this._fontStyle = style;
+        this._fontWeight = weight;
+    }
+
+    public withFontFamily(family: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+
+    public withFontStyle(style: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+
+    public withFontWeight(weight: string): Font {
+        throw new Error("This should be called on the derived class");
+    }
+}

ui/styling/font.android.ts

@@ -0,0 +1,50 @@
+import enums = require("ui/enums");
+import common = require("ui/styling/font-common");
+
+//declare var exports;
+//require("utils/module-merge").merge(common, exports);
+
+export class Font extends common.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _android: android.graphics.Typeface;
+    get android(): android.graphics.Typeface {
+        if (!this._android) {
+            var style: number;
+            if (this.isBold) {
+                if (this.isItalic) {
+                    style = android.graphics.Typeface.BOLD_ITALIC;
+                }
+                else {
+                    style = android.graphics.Typeface.BOLD;
+                }
+            }
+            else if (this.isItalic) {
+                style = android.graphics.Typeface.ITALIC;
+            }
+            else {
+                style = android.graphics.Typeface.NORMAL;
+            }
+
+            this._android = android.graphics.Typeface.create(this.fontFamily, style);
+        }
+        return this._android;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        super(family, style, weight);
+    }
+
+    public withFontFamily(family: string): Font {
+        return new Font(family, this.fontStyle, this.fontWeight);
+    }
+
+    public withFontStyle(style: string): Font {
+        return new Font(this.fontFamily, style, this.fontWeight);
+    }
+
+    public withFontWeight(weight: string): Font {
+        return new Font(this.fontFamily, this.fontStyle, weight);
+    }
+}
+

ui/styling/font.d.ts

@@ -0,0 +1,21 @@
+declare module "ui/styling/font" {
+    export class Font {
+        public static default: Font;
+
+        public fontFamily: string;
+        public fontStyle: string;
+        public fontWeight: string;
+
+        public isBold: boolean;
+        public isItalic: boolean;
+
+        public ios: UIFontDescriptor;
+        public android: android.graphics.Typeface;
+
+        constructor(family: string, style: string, weight: string);
+
+        public withFontFamily(family: string): Font;
+        public withFontStyle(style: string): Font;
+        public withFontWeight(weight: string): Font;
+    }
+}

ui/styling/font.ios.ts

@@ -0,0 +1,49 @@
+import enums = require("ui/enums");
+import common = require("ui/styling/font-common");
+
+//declare var exports;
+//require("utils/module-merge").merge(common, exports);
+
+export class Font extends common.Font {
+    public static default = new Font(undefined, enums.FontStyle.normal, enums.FontWeight.normal);
+
+    private _ios: UIFontDescriptor;
+    get ios(): UIFontDescriptor {
+        if (!this._ios) {
+            this._ios = UIFontDescriptor.fontDescriptorWithNameSize(this.fontFamily, 0);
+            if (this.isBold) {
+                if (this.isItalic) {
+                    this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic |
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold);
+                }
+                else {
+                    this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                        UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitBold);
+                }
+            }
+            else if (this.isItalic) {
+                this._ios = this._ios.fontDescriptorWithSymbolicTraits(
+                    UIFontDescriptorSymbolicTraits.UIFontDescriptorTraitItalic);
+            }
+        }
+        return this._ios;
+    }
+
+    constructor(family: string, style: string, weight: string) {
+        super(family, style, weight);
+    }
+
+    public withFontFamily(family: string): Font {
+        return new Font(family, this.fontStyle, this.fontWeight);
+    }
+
+    public withFontStyle(style: string): Font {
+        return new Font(this.fontFamily, style, this.fontWeight);
+    }
+
+    public withFontWeight(weight: string): Font {
+        return new Font(this.fontFamily, this.fontStyle, weight);
+    }
+}
+

ui/styling/style.ts

@@ -11,6 +11,7 @@ import converters = require("ui/styling/converters");
 import enums = require("ui/enums");
 import imageSource = require("image-source");
 import utils = require("utils/utils");
+import font = require("ui/styling/font");
 
 // key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
 var _registeredHandlers = Array<Object>();
@@ -75,6 +76,27 @@ export class Style extends observable.DependencyObservable implements styling.St
         this._setValue(fontSizeProperty, value, observable.ValueSource.Local);
     }
 
+    get fontFamily(): string {
+        return this._getValue(fontFamilyProperty);
+    }
+    set fontFamily(value: string) {
+        this._setValue(fontFamilyProperty, value, observable.ValueSource.Local);
+    }
+
+    get fontStyle(): string {
+        return this._getValue(fontStyleProperty);
+    }
+    set fontStyle(value: string) {
+        this._setValue(fontStyleProperty, value, observable.ValueSource.Local);
+    }
+
+    get fontWeight(): string {
+        return this._getValue(fontWeightProperty);
+    }
+    set fontWeight(value: string) {
+        this._setValue(fontWeightProperty, value, observable.ValueSource.Local);
+    }
+
     get textAlignment(): string {
         return this._getValue(textAlignmentProperty);
     }
@@ -444,6 +466,39 @@ export var fontSizeProperty = new styleProperty.Property("fontSize", "font-size"
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout | observable.PropertyMetadataSettings.Inheritable),
     converters.fontSizeConverter);
 
+export var fontFamilyProperty = new styleProperty.Property("fontFamily", "font-family",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontFamilyChanged));
+
+export var fontStyleProperty = new styleProperty.Property("fontStyle", "font-style",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontStyleChanged));
+
+export var fontWeightProperty = new styleProperty.Property("fontWeight", "font-weight",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, onFontWeightChanged));
+
+function onFontFamilyChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontFamily(data.newValue));
+}
+
+function onFontStyleChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontStyle(data.newValue));
+}
+
+function onFontWeightChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+
+    var currentFont = <font.Font>style._getValue(fontProperty);
+    style._setValue(fontProperty, currentFont.withFontWeight(data.newValue));
+}
+
+export var fontProperty = new styleProperty.Property("font", "font",
+    new observable.PropertyMetadata(font.Font.default, observable.PropertyMetadataSettings.AffectsLayout));
+
 export var textAlignmentProperty = new styleProperty.Property("textAlignment", "text-align",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.AffectsLayout | observable.PropertyMetadataSettings.Inheritable),
     converters.textAlignConverter);

ui/styling/stylers.android.ts

@@ -302,6 +302,20 @@ export class TextViewStyler implements definition.stylers.Styler {
         return (<android.widget.TextView>view.android).getTextSize();
     }
 
+    // font
+    private static setFontProperty(view: view.View, newValue: any) {
+        var typeface = <android.graphics.Typeface>newValue;
+        (<android.widget.TextView>view.android).setTypeface(typeface);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        (<android.widget.TextView>view.android).setTypeface(nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        return (<android.widget.TextView>view.android).getTypeface();
+    }
+
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var verticalGravity = view.android.getGravity() & android.view.Gravity.VERTICAL_GRAVITY_MASK;
@@ -339,6 +353,11 @@ export class TextViewStyler implements definition.stylers.Styler {
             TextViewStyler.resetFontSizeProperty,
             TextViewStyler.getNativeFontSizeValue));
 
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            TextViewStyler.setFontProperty,
+            TextViewStyler.resetFontProperty,
+            TextViewStyler.getNativeFontValue));
+
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextViewStyler.setTextAlignmentProperty,
             TextViewStyler.resetTextAlignmentProperty,

ui/styling/stylers.ios.ts

@@ -124,6 +124,32 @@ export class DefaultStyler implements definition.stylers.Styler {
         }
     }
 
+    // Font size
+    private static setFontSizeProperty(view: view.View, newValue: any) {
+        setFontSize(view._nativeView, newValue);
+    }
+
+    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
+        setFontSize(view._nativeView, nativeValue);
+    }
+
+    private static getNativeFontSizeValue(view: view.View): any {
+        return getNativeFontSize(view._nativeView);
+    }
+
+    // Font
+    private static setFontProperty(view: view.View, newValue: any) {
+        setFont(view._nativeView, newValue);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        resetFont(view._nativeView, nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        return getNativeFont(view._nativeView);
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setBackgroundProperty,
@@ -154,6 +180,16 @@ export class DefaultStyler implements definition.stylers.Styler {
         style.registerHandler(style.borderRadiusProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setBorderRadiusProperty,
             DefaultStyler.resetBorderRadiusProperty));
+
+        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setFontSizeProperty,
+            DefaultStyler.resetFontSizeProperty,
+            DefaultStyler.getNativeFontSizeValue));
+
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setFontProperty,
+            DefaultStyler.resetFontProperty,
+            DefaultStyler.getNativeFontValue));
     }
 }
 
@@ -183,23 +219,33 @@ export class ButtonStyler implements definition.stylers.Styler {
     // Font size
     private static setFontSizeProperty(view: view.View, newValue: any) {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
+        setFontSize(btn.titleLabel, newValue);
-            btn.titleLabel.font = btn.titleLabel.font.fontWithSize(newValue);
-        }
     }
 
     private static resetFontSizeProperty(view: view.View, nativeValue: any) {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
+        setFontSize(btn.titleLabel, nativeValue);
-            btn.font = btn.titleLabel.font.fontWithSize(nativeValue);
-        }
     }
 
     private static getNativeFontSizeValue(view: view.View): any {
         var btn: UIButton = <UIButton>view._nativeView;
-        if (btn) {
+        return getNativeFontSize(btn.titleLabel);
-            return btn.titleLabel.font.pointSize;
+    }
-        }
+
+    // Font
+    private static setFontProperty(view: view.View, newValue: any) {
+        var btn: UIButton = <UIButton>view._nativeView;
+        setFont(btn.titleLabel, newValue);
+    }
+
+    private static resetFontProperty(view: view.View, nativeValue: any) {
+        var btn: UIButton = <UIButton>view._nativeView;
+        resetFont(btn.titleLabel, nativeValue);
+    }
+
+    private static getNativeFontValue(view: view.View): any {
+        var btn: UIButton = <UIButton>view._nativeView;
+        return getNativeFont(btn.titleLabel);
     }
 
     // text-align
@@ -254,6 +300,11 @@ export class ButtonStyler implements definition.stylers.Styler {
             ButtonStyler.resetFontSizeProperty,
             ButtonStyler.getNativeFontSizeValue), "Button");
 
+        style.registerHandler(style.fontProperty, new stylersCommon.StylePropertyChangedHandler(
+            ButtonStyler.setFontProperty,
+            ButtonStyler.resetFontProperty,
+            ButtonStyler.getNativeFontValue), "Button");
+
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             ButtonStyler.setTextAlignmentProperty,
             ButtonStyler.resetTextAlignmentProperty,
@@ -284,28 +335,6 @@ export class LabelStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            label.font = label.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            label.font = label.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var label: UILabel = <UILabel>view._nativeView;
-        if (label) {
-            return label.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UILabel = <UILabel>view._nativeView;
@@ -346,11 +375,6 @@ export class LabelStyler implements definition.stylers.Styler {
             LabelStyler.resetColorProperty,
             LabelStyler.getNativeColorValue), "Label");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            LabelStyler.setFontSizeProperty,
-            LabelStyler.resetFontSizeProperty,
-            LabelStyler.getNativeFontSizeValue), "Label");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             LabelStyler.setTextAlignmentProperty,
             LabelStyler.resetTextAlignmentProperty,
@@ -381,28 +405,6 @@ export class TextFieldStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            textField.font = textField.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            textField.font = textField.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var textField: UITextField = <UITextField>view._nativeView;
-        if (textField) {
-            return textField.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UITextField = <UITextField>view._nativeView;
@@ -443,11 +445,6 @@ export class TextFieldStyler implements definition.stylers.Styler {
             TextFieldStyler.resetColorProperty,
             TextFieldStyler.getNativeColorValue), "TextField");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            TextFieldStyler.setFontSizeProperty,
-            TextFieldStyler.resetFontSizeProperty,
-            TextFieldStyler.getNativeFontSizeValue), "TextField");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextFieldStyler.setTextAlignmentProperty,
             TextFieldStyler.resetTextAlignmentProperty,
@@ -493,28 +490,6 @@ export class TextViewStyler implements definition.stylers.Styler {
         }
     }
 
-    // Font size
-    private static setFontSizeProperty(view: view.View, newValue: any) {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            textView.font = textView.font.fontWithSize(newValue);
-        }
-    }
-
-    private static resetFontSizeProperty(view: view.View, nativeValue: any) {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            textView.font = textView.font.fontWithSize(nativeValue);
-        }
-    }
-
-    private static getNativeFontSizeValue(view: view.View): any {
-        var textView: UITextView = <UITextView>view._nativeView;
-        if (textView) {
-            return textView.font.pointSize;
-        }
-    }
-
     // text-align
     private static setTextAlignmentProperty(view: view.View, newValue: any) {
         var ios: UITextView = <UITextView>view._nativeView;
@@ -555,11 +530,6 @@ export class TextViewStyler implements definition.stylers.Styler {
             TextViewStyler.resetColorProperty,
             TextViewStyler.getNativeColorValue), "TextView");
 
-        style.registerHandler(style.fontSizeProperty, new stylersCommon.StylePropertyChangedHandler(
-            TextViewStyler.setFontSizeProperty,
-            TextViewStyler.resetFontSizeProperty,
-            TextViewStyler.getNativeFontSizeValue), "TextView");
-
         style.registerHandler(style.textAlignmentProperty, new stylersCommon.StylePropertyChangedHandler(
             TextViewStyler.setTextAlignmentProperty,
             TextViewStyler.resetTextAlignmentProperty,
@@ -659,3 +629,49 @@ export function _registerDefaultStylers() {
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
 }
+
+interface ViewWithFont {
+    font: UIFont;
+}
+
+interface ViewWithTextAlignment {
+    font: UIFont;
+}
+
+// FontSize
+function setFontSize(view: ViewWithFont, newValue: any) {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        view.font = view.font.fontWithSize(newValue);
+    }
+}
+
+function getNativeFontSize(view: ViewWithFont): number {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        return view.font.pointSize;
+    }
+    else {
+        return 0;
+    }
+}
+
+// Font
+function setFont(view: ViewWithFont, newValue: UIFontDescriptor) {
+    var fontView = <ViewWithFont>(<any>view);
+    var font = fontView.font;
+    if (font && font instanceof UIFont) {
+        fontView.font = UIFont.fontWithDescriptorSize(newValue, fontView.font.pointSize);
+    }
+}
+
+function resetFont(view: ViewWithFont, newValue: UIFont) {
+    var font = view.font;
+    if (font && font instanceof UIFont) {
+        view.font = newValue;
+    }
+}
+
+function getNativeFont(view: ViewWithFont): UIFont {
+    return view.font;
+}

ui/styling/styling.d.ts

@@ -53,6 +53,22 @@
          */
         fontSize: number;
 
+        /**
+         * Gets or sets font-family style property.
+         */
+        fontFamily: string;
+
+        /**
+         * Gets or sets font-style style property.
+         */
+        fontStyle: string;
+
+        /**
+         * Gets or sets font-weight style property.
+         */
+        fontWeight: string;
+
+
         /**
          * Gets or sets text-alignment style property.
          */