カスタムフォントを使用してアプリのラベルやボタンに表示させる方法 | Xamarin.Forms

今回はXamarin.Formsでカスタムフォント（独自フォント）を利用してアプリに表示させる方法についてご紹介いたします。カスタムフォントの使用方法については以前の記事でもご紹介していますが、ラベルやボタンへの反映方法とは関係のないものでしたし、フォントによりiOS上で表示する際の注意点などがわかりましたので、今回改めてご紹介させていただきます。尚、iOSとAndroidで若干設定が異なりますが、全体的には共通して記述が可能です。
なかでも苦労したのは、フォントファミリー名が日本語のフォント。PostScript名を指定してもただしくiOS上で表示されませんでしたが、解決しました。

 



前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.784 (NuGet Xamarin.Forms 2.3.4.224)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.4.0.123

１．カスタムフォントをダウンロードする

アプリに表示したいフォントをダウンロードして取得します。
商用利用が可能なもの、漢字が表示可能なものは限られていると思います。利用規約は入念にチェックしましょう。

私は以下のサイトからダウンロードしました。
http://font.cutegirl.jp/jk-font-medium.html
http://www.fontna.com/blog/379/

２．フォントのPostScript名を取得する

Windowsでフォントをインストールする際に出てくるフォント名ではありません。
WindowsでもアプリをインストールすることによりPostScript名を取得できますが、面倒なので、Macで行います。
（１）Macのデスクトップに取得したカスタムフォントファイルを配置する。
　　共有フォルダやVMのフォルダを経由して配置しましょう。
（２）ターミナルを開き、mdlsコマンドの後に、デスクトップからフォントファイルをドラッグ＆ドロップします。
（３）com_apple_ats_name_postscript に表示されている名称がPpostScript名です。

３．フォントをソリューションに配置する

（１）カスタムフォントのファイル名をPostScript名に変更します。
　　今回は「JKG-M_3.ttf」というファイル名でしたが、「JK-Gothic-M.ttf」に変更します。フォント自体の改変では無い為、利用規約等には触れないはずです。
（２）Androidの場合
　　・配置フォルダ：Androidプロジェクト\Assets\Fonts\
　　・ビルドアクション:AndroidAsset
　　・出力ディレクトリにコピー：コピーしない
（３）iOSの場合
　　・配置フォルダ：iOSプロジェクト\Resources\Fonts\
　　・ビルドアクション:BundleResource
　　・出力ディレクトリにコピー：常にコピーする

４．Info.plistに追記する

iOSの場合はInfo.plistに以下の記述が必要です。
Info.plist

<plist version="1.0">
<dict>
    <key>UIAppFonts</key>
    <array>
        <string>Fonts/07YasashisaGothic.ttf</string>
        <string>Fonts/JK-Gothic-M.ttf</string>
    </array>
</dict>
</plist>

５．コントロール毎にカスタムレンダラーを作成する

（１）Androidの場合、Androidプロジェクトに以下のファイルを作成します。
Typeface.CreateFromAssetの処理が非常に重く、コントロールを多く表示する画面ではUIの更新をブロックしてしまう為、使いまわした方が良いです。個々のコントロールでフォントが異なる場合は使いまわせません。

CustomButtonRenderer.cs

using Android.Graphics;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer))]
namespace AppName.Droid.Renderer
{
    public class CustomButtonRenderer : ButtonRenderer
    {
        //Fontを使いまわす為
        private static Typeface _font = null;

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            try
            {
                if (_font == null)
                {
                    //Fontが取得できていない場合は取得する
                    var fontName = e.NewElement?.FontFamily;
                    if (!string.IsNullOrEmpty(fontName))
                    {
                        _font = Typeface.CreateFromAsset(Forms.Context.Assets, fontName);
                    }
                }
                if (_font != null)
                {
                    //Fontが取得できていればフォントを設定する
                    Control.Typeface = _font;
                }
            }
            catch (Exception ex)
            {
                System.Console.WriteLine(ex.Message + System.Environment.NewLine +
                                         ex.StackTrace);
            }
        }
    }
}

CustomLabelRenderer.cs

using Android.Graphics;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
[assembly: ExportRenderer(typeof(Label), typeof(CustomLabelRenderer))]
namespace AppName.Droid.Renderer
{
    public class CustomLabelRenderer : LabelRenderer
    {
        //Fontを使いまわす為
        private static Typeface _font = null;

        protected override async void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control == null || e.NewElement == null)
            {
                return;
            }

            try
            {
                if (_font == null)
                {
                    //Fontが取得できていない場合は取得する
                    var fontName = e.NewElement?.FontFamily;
                    if (!string.IsNullOrEmpty(fontName))
                    {
                        _font = Typeface.CreateFromAsset(Forms.Context.Assets, fontName);
                    }
                }
                if (_font != null)
                {
                    //Fontが取得できていればフォントを設定する
                    Control.Typeface = _font;
                }
            }
            catch (Exception ex)
            {
                System.Console.WriteLine(ex.Message + System.Environment.NewLine +
                                         ex.StackTrace);
            }
        }
    }
}

（２）iOSの場合、iOSプロジェクトに以下のファイルを作成します。
CustomButtonRenderer.cs

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(Button), typeof(CustomButtonRenderer))]
namespace AppName.iOS.Renderer
{
    public class CustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            try
            {
                var fontName = e.NewElement?.FontFamily;
                if (!string.IsNullOrEmpty(fontName))
                {
                    Control.TitleLabel.Font = UIFont.FromName(fontName, Control.TitleLabel.Font.PointSize);
                }
            }
            catch (Exception ex)
            {
                System.Console.WriteLine(ex);
            }
        }
    }
}

CustomLabelRenderer.cs

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(Label), typeof(CustomLabelRenderer))]
namespace AppName.iOS.Renderer
{
    public class CustomLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            try
            {
                var fontName = e.NewElement?.FontFamily;
                if (!string.IsNullOrEmpty(fontName))
                {
                    Control.Font = UIFont.FromName(fontName, Control.Font.PointSize);
                }
            }
            catch (Exception ex)
            {
                System.Console.WriteLine(ex);
            }
        }
    }
}

６．使用方法

App.csに記載して全体にStyleを適用するやりかたもあると思いますが、Xamarinは初回起動時の動作が遅いので、App.csの処理を追加したくありません。よって、ボタンやラベルの基本クラスを作成し、それをXamlに適用する形をとっています。

BaseButton.cs

using Xamarin.Forms;
namespace AppName.Controls
{
    public class BaseButton : Button
    {
        public BaseButton() : base()
        {
            this.FontAttributes = FontAttributes.Bold;
            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    this.FontFamily = "JK-Gothic-M"; //"07YasashisaGothic"; //PostScript名
                    break;

                case Device.Android:
                    this.FontFamily = "Fonts/JK-Gothic-M.ttf";  //ファイル名
                    break;
            }
        }
    }
}

BaseLabel.cs

using Xamarin.Forms;
namespace AppName.Controls
{
    public class BaseLabel : Label
    {
        public BaseLabel() : base()
        {
            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    this.FontFamily = "JK-Gothic-M"; //"07YasashisaGothic";  //PostScript名
                    break;

                case Device.Android:
                    this.FontFamily = "Fonts/JK-Gothic-M.ttf";  //ファイル名
                    break;
            }
        }
    }
}

XAML

<ContentPage xmlns:app="clr-namespace:ソリューション名.Controls;assembly=アプリ名">
<app:BaseLabel x:Name="lblTest" Text="ラベルだよ"/>
<app:BaseButton x:Name="btnSave" Text="ボタンだよ"/>
</ContentPage>

ナビゲーションバー（タイトルの部分）のフォント・スタイル変更については以下の記事にて紹介しております。
http://itblogdsi.blog.fc2.com/blog-entry-157.html

当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html