Using Custom Fonts In Xamarin.Forms

Introduction

In many applications, it is a compulsory requirement to include custom fonts. The type of the fonts to be used depends on the requirement of the application. This article gives a detailed explanation of using custom fonts in Xamarin forms applications.

Step 1

Select "New project" at the left side of Visual Studio. A pop up window listing out different projects will be opened. 

Select "Cross-Platform" at the left side and then select Blank App (Xamarin.Forms Portable), as shown in the figure. 

 

Rename the application "CustomFont App". Then click "OK" so that a new project with name "CustomFont App" is created.

Step 2

Open the Solution Explorer. Right click on the portable project, add a click on "Add a new item", so that a popup window is opened as shown.

 

Select Cross-platform and select "Forms Xaml Page" and rename the page as "CustomFontPage".

Then, click on "Add" Button so that an XAML page with the name "CustomFontPage" is created.



Step 3

Download .ttf files from font specifying websites ex: "www.fontsquirrel.com". and place the .ttf files in the assets folder of the Android project as shown in the below screen shot.



Step 4

Add the following lines of code in .xaml page of CustomFontPage.

<StackLayout>
   <Label Text="Default Font" TextColor="Black" FontSize="25" ></Label>
   <Label Text="Pacifico Font" TextColor="Black" FontSize="25" FontFamily="Pacifico.ttf#Pacifico"></Label>
   <Label Text="Roboto-Regular Font" TextColor="Black" FontSize="25" FontFamily="Roboto-Regular.ttf#Roboto-Regular"></Label>
</StackLayout>

Step 5

The final output is shown in the screen shot.