Fontes customizadas e ícones em projetos Xamirm.Forms

A partir do Xamarin Forms 4.5, ganhamos a possibilidade de inserir fontes personalizadas diretamente no projeto “CrossPlatform” sem ter que copiar arquivos para cada plataforma. Além disso, temos a comodidade de não precisar alterar o arquivo Info.plist no IOS, o que simplifica ainda mais o processo de criação de aplicativos.

O que você vai ver neste artigo:

– Instalando Fontes Personalizadas – FontAwesome.
– Como incluir fontes no projeto “CrossPlatform”.
– Utilizando FontAwesome.
– Ícones em App com Fontes Personalizadas.
– Ícones no lugar de imagens.
– Fontes Personalizadas.

1 – FontAwesome

Primeiramente iremos ao site do FontAwesome e na sesssão de downloads baixar o arquivo contendo as fontes Awesome.
Clique aqui para acessar o site FontAwesome.

Selecione a opção de download para desktop e, para esse exemplo, vou baixar a versão gratuita.

Após baixar, extraia o conteúdo compactado e selecione quais arquivos de fontes quer utilizar. Para esse exemplo vou selecionar as fontes Solid e Regular.

2 – Como incluir fontes no projeto “CrossPlatform”

Vamos incluir os arquivos de fonte em nosso projeto e garantir que a ação de compilação seja “Recurso embutido” em inglês “Embed Resource“.

Você não precisa colocar o arquivo nos projetos Android e IOS, apenas no projeto compartilhado entre as plataformas.

Crie uma Pasta Chamada “Resources“, caso ela não exista.
Obs: Eu faço desta forma apenas para manter o projeto organizado, mas não é uma obrigação criar as pastas.

Agora Crie uma pasta dentro da “Resources” e chame-a de “Fonts“.

Clique com o botão direito em cima da pasta “Fonts“, Selecione “Add” e escolha a opção “Existing Item“.
Escolha as fontes que foram baixadas anteriormente.

Obs: os arquivos baixados no site FontAwesome devem estar descompactados, se não estiver descompacte antes de prosseguir.
Quando for adicionar, lembre-se de listar para aparecer todos os arquivos(All files), caso contrário os arquivos das fonts não aparecerão para o visual studio.

Lembra que falamos que precisariamos garantir que a ação de compilação seja “Recurso embutido” ?
No Visual Studio dê duplo clique no seu projeto para abrir o “.csproj“.
Crie um “ItemGroup” e adicione o código asseguir.

<ItemGroup>
    <None Remove="Resources\Fonts\Font Awesome 5 Free-Regular-400.otf" />
    <None Remove="Resources\Fonts\Font Awesome 5 Free-Solid-900.otf" />

    <EmbeddedResource Include="Resources\Fonts\Font Awesome 5 Free-Regular-400.otf" />
    <EmbeddedResource Include="Resources\Fonts\Font Awesome 5 Free-Solid-900.otf" />
  </ItemGroup>

Agora, precisamos declarar nossa fonte à nível de “assembly”. Isso pode ser feito em qualquer arquivo (.cs) do projeto, mas usaremos o “AssemblyInfo.cs“.

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

//Declaramos aqui o nome do arquivo da fonte e o "Alias" que vamos utilizar para chamar a fonte
[assembly: ExportFont("Font Awesome 5 Free-Regular-400.otf", Alias = "FontAwesomeRegular")]
[assembly: ExportFont("Font Awesome 5 Free-Solid-900.otf", Alias = "FontAwesomeBold")]

3 – Utilizando FontAwesome

Agora para utilizarmos, o fontawesome, vamos definir em nosso controle o FontFamily com o valor do Alias que criamos.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xamarin.Fonts.MainPage">
    <StackLayout>
        <Label Text="&#xf1ae;"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand"
               FontSize="27"
               FontFamily="FontAwesomeBold"/>
    </StackLayout>
</ContentPage>

4 – Icones

Para utilizar os ícones no “xaml” vamos usar o prefixo “&#x”, o código do icone (que pode ser encontrado no site do FontAwesome) e o sufixo “;”.

Exemplo:
Para utilizar o ícone “Child” (código f1ae) a propriedade Text ficaria com o valor “”

5 – Imagens

Também podemos utilizar com “FontImageSource”, em controles que esperam uma fonte de imagem

<Image>
   <Image.Source>
      <FontImageSource FontFamily="FontAwesomeBold" Color="Black" Glyph="&#xf1ae;" />
   </Image.Source>
</Image>

Veja a seguir o resultado final da inserção dos ícones de fontes Awesome para label e para Image.

Você pode utilizar fontes com extensão “.otf “ou “.ttf“.

Agora você já sabe como implementar o uso de fontes personalizadas em seus projetos, e o melhor sem precisar fazer alteração para cada tipo de plataforma, pois tudo fica embutido no projeto principal.

6 – Outras Fontes

Para inserir outros tipos de fontes que não sejam ícones, como uma fonte personalizada do google fonts ou de outro repositório, siga os passos de 1 à 3 e quando for utilizar a nova fonte personalizada em uma label ou Image basta referenciar em sua “FontFamily” pelo nome da fonte ou Alias.
Veja o exemplo para a fonte: Samantha.ttf

<Label Text="Fonte Samtha - Que Show !"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="CenterAndExpand"
               FontSize="60"
               TextColor="Black"
               FontFamily="FontSamantha"
               Margin="0,0,0,100"/>

E por fim o resultado:

Espero que gostem desta dica e sempre que conseguir trarei novos conteúdos para vocês. Abraço!