[MAUI] Font 추가

안녕하세요. 이번 포스팅은 닷넷 마우이 첫 포스팅이자, Font를 추가하는 방법을 포스팅하겠습니다.
이번 코드는 맥북에서 작성하였고, 윈도우 환경과는 차이가 있습니다. 참고 부탁드리겠습니다. 그리고 폰트는 나눔고딕으로 진행합니다. 폰트는 아래의 주소에서 다운 부탁드리겠습니다. 
https://hangeul.naver.com/font

네이버 글꼴 모음

1.  프로젝트 생성

먼저, Maui 프로젝트를 생성합니다. 저는 FontExample로 만들었습니다.

2.  폰트추가

1) Resources 폴도 아래에 Fonts폴더가 있습니다. 폰트를 우클릭 후 추가 - 기존파일을 선택 후 다운받으신 나눔고딕 폰트를 추가를 합니다. 

Resources - Fonts

해당 폰트를 추가하면 아래와 같이 나타납니다. 

Font 추가 결과

2) MauiProgram.cs에 추가 한 폰트 추가

fonts.AddFont(폰트파일명, 설정 폰트 약어) 와 같이 설정합니다. 폰트는 설정 폰트 약어를 통하여 설정이 됩니다. 폰트 경로는 프로젝트 파일에서 설정 됩니다.

using Microsoft.Extensions.Logging;

namespace FontExample;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("NanumGothic.ttf", "Nanum");
                fonts.AddFont("NanumGothicBold.ttf", "NanumB");
                fonts.AddFont("NanumGothicExtraBold.ttf", "NanumEB");
                fonts.AddFont("NanumGothicLight.ttf", "NanumL");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

3. MainPage 수정

MainPage.xaml 파일을 열어 Label Hello, Wolrd! 아래에 코드를 추가 해주세요.

<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    FontFamily="Nanum"
    HorizontalOptions="Center" />
<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    FontFamily="NanumB"
    HorizontalOptions="Center" />
<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    FontFamily="NanumEB"
    HorizontalOptions="Center" />
<Label
    Text="Hello, World!"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    FontFamily="NanumL"
    HorizontalOptions="Center" />

3. 결과

그리고, 실행 하여 결과를 확인합니다. 해당 결과는 폰트가 정상적으로 설정된 것을 확인 할 수 있습니다. 

실행 결과

※ 프로젝트에서 폰트 경로 수정 
해당 프로젝트를 선택하여 프로젝트 편집을 클릭하면 편집 가능한 프로젝트 파일이 나타납니다. MauiFont를 조회하시면 아래와 같은 정보를 수정 할 수 있습니다. 

<ItemGroup>
    <!-- App Icon -->
    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
    
    <!-- Splash Screen -->
    <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />

    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />
    <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />

    <!-- Custom Fonts -->
    <MauiFont Include="Resources\Fonts\*" />

    <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
    <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>

 

이상으로 .Net Maui에서 폰트 설정에 관한  포스팅을 마치겠습니다. 감사합니다.