How to add custom fonts on xamarin forms

Hello,

I work on a project xamarin forms, and i want to add a new font family.
i followed the official tutorial and it's not working!
i downloaded a font fantasy.ttf and then i paste it in asset of android project then i added this code in app.xaml


this don't work.
(#Final Fantasy i finded it in properties of the Fantasy.tff file in title)

How can i solve this?
thanks!

Posts

  • igorkr_10igorkr_10 Member ✭✭✭
    edited September 2018

    Are you talking about all platform or only android? Can you show your code?
    If you have problems with fonts, make sure:
    1) Your custom renderer is properly initialized;
    2) Your font is AndroidAsset;
    3) If you are using .otf you need set to label text "\uyourIconCode" (for example: "\uf0c5"), if .ttf then "&#xyourIconCode" ("&#xf05c").
    4) Make sure icon you want to use is included in font (maybe it is not free);
    If you have already resolved problem don't forget to share your experience =)

  • zakaria_zzzakaria_zz Member ✭✭

    Hello,
    i downloaded Billy Ohio.ttf file i put it in assets of android project, then i added this code in app.xaml

    then i call the font in a label like that : FontFamily = "Ohio" and it's not working!!

  • zakaria_zzzakaria_zz Member ✭✭

    i found a solution for this, but now i want to have the fontFamily in my css file i did this :
    @font-face {
    font-family: myFirstFont;
    src: url('../Style/Billy Ohio.ttf');
    }
    .test {
    font-family: myFirstFont;
    color: blue;
    }

    and it's not working how to add font to css?

  • igorkr_10igorkr_10 Member ✭✭✭

    Check my post. There is example of using custom fonts for Android and iOS.

  • IrongutIrongut Member ✭✭✭
    edited October 2018

    The way I usually do this for Android and UWP is to put the font files the Assets folder in my platform specific projects and then in my class library / PCL I add lines like this to App.xaml:

    <!--    Corporate Font - Nunito     --> 
    <OnPlatform x:TypeArguments="x:String" x:Key="NormalFont">
        <On Platform="Android" Value="Nunito-Regular.ttf#Nunito" />
        <On Platform="UWP" Value="/Assets/Nunito-Regular.ttf#Nunito" />
    </OnPlatform>
    <OnPlatform x:TypeArguments="x:String" x:Key="BoldFont">
        <On Platform="Android" Value="Nunito-Bold.ttf#Nunito" />
        <On Platform="UWP" Value="/Assets/Nunito-Bold.ttf#Nunito" />
    </OnPlatform>
    <!--    Font Awesome     -->
    <OnPlatform x:TypeArguments="x:String" x:Key="FA-Brands">
        <On Platform="Android" Value="Font Awesome 5 Brands-Regular-400.otf#Font Awesome 5 Brands Regular" />
        <On Platform="UWP" Value="/Assets/Font Awesome 5 Brands-Regular-400.otf#Font Awesome 5 Brands" />
    </OnPlatform>
    <OnPlatform x:TypeArguments="x:String" x:Key="FA-Solid">
        <On Platform="Android" Value="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" />
        <On Platform="UWP" Value="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
    </OnPlatform>
    

    Then I reference those fonts in my xaml like this:

    <Button Text="Cosmos" HeightRequest="100" WidthRequest="100" FontFamily="{StaticResource NormalFont}" Clicked="OnButtonFoorClicked"/>
    
    <Label Text="© 2018 All rights reserved." FontFamily="{StaticResource BoldFont}" HorizontalOptions="Center" VerticalOptions="End"/>
    
    <Label Text="&#xf1d1;" FontSize="50" TextColor="#7d50a0" HorizontalOptions="Center" FontFamily="{StaticResource FA-Brands}"/>
    

    In my case I don't need iOS support but that works similarly, you just need to put the fonts in the Resources folder and reference them correctly in the App.xaml which is simpler than Android or UWP:

    <On Platform="iOS" Value="Font Awesome 5 Free" />
    
Sign In or Register to comment.