none
How do I set a appwide font?

    Question

  • Hi, In my app, I'd like to make Comic Sans MS as the default font used by all styles. Rather than styling every textbox and control, is there a way I can easily control this? Thanks!
    Thursday, December 16, 2010 10:09 AM

Answers

  • Okay, I just discovered that it also overrides the system's automatic light/dark theme color switching, and in the light theme you end up with white text on white background.

    You can override just the FontFamily definitions. Instead of copying the entire ThemeResources.xaml, insert only this portion into <Application.Resources>:
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Comic Sans MS</FontFamily> 
     
                <!-- TextBlock styles --> 
     
                <Style x:Key="PhoneTextBlockBase" TargetType="TextBlock">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>  
                    <Setter Property="Margin" Value="{StaticResource PhoneHorizontalMargin}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextNormalStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}" /> 
     
                <Style x:Key="PhoneTextSubtleStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle1Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle2Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle3Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextExtraLargeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextGroupHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextLargeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextSmallStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextContrastStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneContrastForegroundBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextAccentStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextHugeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeHuge}"/>  
                </Style> 


    Richard
    Thursday, December 16, 2010 7:03 PM

All replies

  • You can override default styles in your App.xaml.

    Find the default settings in this file on your computer:
    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\ThemeResources.xaml
    Copy the entire contents of the file and insert it between <Application.Resources> and </Application.Resources> in your App.xaml, then modify as desired.

    To use Comic Sans, replace:
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Segoe WP Light</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Segoe WP SemiLight</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Segoe WP Semibold</FontFamily> 
    with
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Comic Sans MS</FontFamily> 

    BTW, you can find some pre-defined color themes in the same directory as ThemeResources.xaml.


    Richard
    Thursday, December 16, 2010 6:45 PM
  • Okay, I just discovered that it also overrides the system's automatic light/dark theme color switching, and in the light theme you end up with white text on white background.

    You can override just the FontFamily definitions. Instead of copying the entire ThemeResources.xaml, insert only this portion into <Application.Resources>:
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Comic Sans MS</FontFamily> 
     
                <!-- TextBlock styles --> 
     
                <Style x:Key="PhoneTextBlockBase" TargetType="TextBlock">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>  
                    <Setter Property="Margin" Value="{StaticResource PhoneHorizontalMargin}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextNormalStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}" /> 
     
                <Style x:Key="PhoneTextSubtleStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle1Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle2Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextTitle3Style" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextExtraLargeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextGroupHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextLargeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextSmallStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextContrastStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneContrastForegroundBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextAccentStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>  
                    <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>  
                </Style> 
     
                <Style x:Key="PhoneTextHugeStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">  
                    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>  
                    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeHuge}"/>  
                </Style> 


    Richard
    Thursday, December 16, 2010 7:03 PM
  • Thanks! I am curious - why do I have to copy that second half with all the TextBlock stuff? What's the difference in that part?
    Saturday, December 18, 2010 7:05 AM
  • There is no difference in the second part. You have to copy it to override the existing styles with ones that use your FontFamily definitions. For example, the framework already defined a PhoneTextNormalStyle that uses the default font. You want to override it with your own PhoneTextNormalStyle that uses your custom font.


    Richard
    Saturday, December 18, 2010 8:44 AM
  • You can override default styles in your App.xaml.

    Find the default settings in this file on your computer:
    C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\ThemeResources.xaml
    Copy the entire contents of the file and insert it between <Application.Resources> and </Application.Resources> in your App.xaml, then modify as desired.

    To use Comic Sans, replace:
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Segoe WP</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Segoe WP Light</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Segoe WP SemiLight</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Segoe WP Semibold</FontFamily> 
    with
                <!-- Font names --> 
                <FontFamily x:Key="PhoneFontFamilyNormal">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilyLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiLight">Comic Sans MS</FontFamily> 
                <FontFamily x:Key="PhoneFontFamilySemiBold">Comic Sans MS</FontFamily> 

    BTW, you can find some pre-defined color themes in the same directory as ThemeResources.xaml.


    Richard
    Thursday, February 02, 2012 5:54 PM