Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Xamarin Forms Custom Fonts CrossPlateform

Emixam23Emixam23 USMember ✭✭✭
edited June 2016 in Xamarin.Forms

Hi,

I'm following the Fonts Tutorial proposed by Xamarin to have a custom downloaded fonts over each plateform. However, I got lot of problems and I also try to find a way to do some things but whitout find how to make it works.

First, take a look at the tutorial and begin at the concerning part. Using a Custom Font


iOS:

It says that we have to add the font.tff into the Resources folder.
Then, we have to do something with the Info.plist, but what? I'm not sure to understand what I have to do.

Androïd:

Xamarin.Forms for Android does not currently expose the ability to set the font to a custom font file, so custom renderers are required.

CustomLabelRenderer.cs

public class CustomLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        System.Diagnostics.Debug.WriteLine(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");

        if (!string.IsNullOrEmpty(e.NewElement?.StyleId))
        {
            var font = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, e.NewElement.StyleId + ".ttf");
            Control.Typeface = font;
        }
    }
}

According to the documentation, the OnElementChanged() would be called, however, it doesn't. Debug.WriteLine() doesn't display anything. Why?

WinPhone 8.1:

We have to add the font file to the /Assets/Fonts/ folder in the application project and set the Build Action:Content. Once realized, Xamarin.Forms for Windows Phone can reference a custom font that has been added to the project by following a specific naming standard. However, the Font doesn't take place on the view, the font stays standard, why?


At the moment, after lot of searches, lot of try... Nothing..

I'm trying to add DIN Condensed Bold font

My XAML layout:

<ContentPage.Content>
 <AbsoluteLayout BackgroundColor="#235A5E">
  <!-- Menu -->
  <AbsoluteLayout x:Name="Menu" BackgroundColor="#2F767B"
                  AbsoluteLayout.LayoutBounds="0,0,1,0.1"
                  AbsoluteLayout.LayoutFlags="All">
    <Label x:Name="label" Text="Connection" TextColor="White" FontSize="30" VerticalOptions="Center" HorizontalOptions="Center"
           AbsoluteLayout.LayoutBounds="0.5, 0, 0.8, 1"
           AbsoluteLayout.LayoutFlags="All"/>
    <Button x:Name="ConnectionButton" BackgroundColor="Transparent" BorderColor="Transparent"
           AbsoluteLayout.LayoutBounds="1, 0.5, 0.2, 1"
           AbsoluteLayout.LayoutFlags="All"/>
  </AbsoluteLayout>
 </AbsoluteLayout>
</ContentPage.Content>

So the FontFamily property of the Label can be set like that

<Label Text="Hello World !" FontFamily="DIN Condensed Bold"

But, as told in the tutorial, for the WinPhone by example, it has to be done by another way so, I try to change the FontFamily by the C# part.

public partial class MyPage : ContentPage
{
    public string FontFamily { get; set; }

    public MyPage()
    {
        InitializeComponent();

        label.FontFamily = Device.OnPlatform(
            iOS: "DIN Condensed Bold",
            Android: "DIN Condensed Bold",
            WinPhone: @"Assets\Fonts\DINCondensedBold.ttf#DIN Condensed Bold"
        );
    }
}

Which doesn't works too ! I also saw something interesting for me about the XAML part. I want (f the FontFamily works one day..) to have a defintion we makes me able to just edit one field string to set all Label's FontFamily of my page.

<ContentPage.Resources>
  <ResourceDictionary>

  </ResourceDictionary>
</ContentPage.Resources>

I saw that I might be able to define a FontFamily for all of the Label of MyPage.xaml, how does it works?

I'm also a newbie about MVVM but I tried to bind my public string FontFamily { get; set; } to the Label defined in the xaml <Label Text="Hello World !" FontFamily="{Binding FontFamily}"/> but one more time, without success..

I'm totaly stuck... Who can help either to make works the tutorial or explain me each things I mentioned after the tutorial. Thank for help !

Best Answers

Answers

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Have a look at my blogpost about this here. Maybe it helps!

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Have a look at my blogpost about this here. Maybe it helps!

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    Have a look at my blog post about this here. Maybe it helps!

  • Emixam23Emixam23 USMember ✭✭✭

    Hey! :)

    I finaly found my answer, I'll put an answer on stackoverflow and then, link everything from here.
    However, the WinPhone8.1 fonts doesn't works, why?

  • SuatKorkmazSuatKorkmaz USMember ✭✭✭

    Any chance you could share the link?

  • Emixam23Emixam23 USMember ✭✭✭
    edited July 2016

    Yep wait 5min ;)

    EDIT

    I add an answer, just check above :)

  • OnurHazarOnurHazar USUniversity ✭✭✭

    Thanks for the solution! Aren't we supposed to do this with OnPlatform tag for Android too? It's written at

    https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/fonts/

    "Device.OnPlatform can also be used in XAML to render a custom font on Android:"

    <Label Text="Hello Forms with XAML"> <Label.FontFamily> <OnPlatform x:TypeArguments="x:String"> <OnPlatform.iOS></OnPlatform.iOS> <OnPlatform.Android>Lobster-Regular.ttf#Lobster-Regular</OnPlatform.Android> <OnPlatform.WinPhone></OnPlatform.WinPhone> </OnPlatform> </Label.FontFamily> </Label>

    I added .ttf to assets folder and set "BuildAction" to "AndroidAsset" but didn't work for Android.

  • Emixam23Emixam23 USMember ✭✭✭

    Hi,

    Yep you're right :)

  • adelapt98adelapt98 Member ✭✭
    edited April 2018

    I added .ttf to assets in Android and to Resources in iOS.
    And:

    Label label = new Label
                {
                    Text = "Label",
                    FontFamily = "IRANSansMobile.ttf#IRANSansMobile"
                };
    

    it's works.

Sign In or Register to comment.