티스토리 뷰

오늘은 Windows Phone에 기본적으로 사용되는 폰트 외에 직접 추가한 폰트를 사용하는 방법에 대해서 알아볼까합니다.

우선 WP7은 타이포그라피가 UX의 핵심에 있는 METRO라는 디자인컨셉을 가지고 있다보니, 기본 폰트가 상당히 예쁩니다.

그냥 사용하더라도 아무런 불만이 없을 정도죠. (참고로 WP7에서 사용되는 기본 폰트는 Segeo WP 라는 폰트로 Microsoft에서 직접 만든 폰트라고 합니다.)

하지만 세상이라는게 그렇습니까? 자신만의 폰트로 개성을 표현하고 싶어질 것입니다.

불행하게도 WP7은 샌드박스모델을 사용하다 보니, 어플리케이션이 시스템 폴더에 접근하는 것이 불가능합니다.

즉, 어플리케이션이 새로운 폰트를 시스템에 설치할 수 가 없는것이죠.

하지만, 너무 실망할 필요는 없습니다. 어플리케이션에서 사용할 폰트를 해당 어플리케이션의 리소스로 등록하여,

그 폰트를 불러와 사용한다면 적어도 내 어플리케이션 안에서 만큼은 기본 폰트 외의 사용자 지정 폰트를 사용하는 것이 가능합니다.

이번에는 어플리케이션에 폰트를 리소스로 등록하여 놓고, 그 폰트를 사용하는 간단한 샘플 어플리케이션을 만들어 보도록 하겠습니다. 


Visual Studio 에서의 사용자 지정 폰트 사용하기


  1. Visual Studio에서 Silverlight Application for Winodws Phone 프로젝트를 생성해 주십시오.
  2. 솔루션 탐색기에서 프로젝트 내에 Fonts 라는 폴더를 생성하세요.
  3. 사용하고자 하는 폰트를 Fonts 폴더에 추가해주시고, 속성창에서 각 폰트파일의 Build ActionContent로 변경하여 주세요. (여기서는 Hawaii Killer 라는 폰트와 Scriptina 라는 폰트를 추가하였습니다.)

  4. Mainpage.xaml 의 UI 구성은 아래와 같이 구성을 하였습니다.

  5. Mainpage.xaml 에서 PageTitle TextBlock의 XAML코드에 아래 내용을 추가하여 주십시오.
    FontFamily="Fonts\SCRIPTIN.ttf#Scriptina"
    이 부분이 XAML 코드에서 사용자 지정 폰트를 사용하도록 지정하는 부분입니다.
    일반적으로 FontFamily속성은 설치된 폰트의 폰트패밀리의 이름을 지정하여 사용하지만, 리소스로 추가된 폰트를 사용하고자 한다면 폰트파일경로#폰트패밀리명 과 같은 형식으로 사용하실 수 있습니다.
    위에서는 폰트경로가 Fonts\SCRIPTIN.ttf 이고 폰트패밀리가 Scriptina 가 되는 것입니다.
    파일명과 폰트패밀리명은 다를 수 있으므로, 주의해주십시오.

  6. XAML 코드에서 직접지정하여 폰트를 사용하실 수 도 있지만, 상황에 따라 폰트를 사용해야 한다면 코드 상에서 폰트를 로드하여 사용하여야 할텐데요.
    이때는 Control 의 FontSource 속성과 FontFamily 속성을 이용하여 사용자 지정 폰트를 사용할 수 있습니다.
    추가했던 fontChangeButton 버튼 컨트롤에 Click 이벤트 핸들러를 등록합니다.
    코드 비하인트 파일인 MainPage.xaml.cs 파일에서 fontChangeButton의 Click 이벤트 핸들러 메서드에 아래와 같은 코드를 추가하여 주십시오.

    StreamResourceInfo fontResourceInfo = Application.GetResourceStream(new Uri("Fonts/Hawaii_Killer.ttf", UriKind.Relative));

    FontSource fontSource = new FontSource(fontResourceInfo.Stream);

    customFontTextBlock.FontSource = fontSource;

    customFontTextBlock.FontFamily = new FontFamily("Hawaii Killer");


    코드를 보자면 Bulid Action 이 Content로 지정된 리소스 파일을 Application 클래스의 GetResourceStream 메서드를 이용하여 가져오고, 가져온 리소스 스트림을 이용하여 FontSource 객체를 생성합니다.
    TextBlock 객체인 customFontTextBlock의 FontSource 속성에 생성한 FontSource를 설정하여, 사용자 지정 폰트를 사용할 수 있도록 설정합니다.
    그리고는 마지막으로는 사용할 폰트 패밀리명을 FontFamily 속성에 설정하여 줍니다.
    FontSource 만 설정하고 FontFamily를 설정하지 않으면 적용되지 않으니, 꼭 FontFamily 도 설정하여 주세요.
    여기까지의 결과가 XAML 코드에서 FontFamily="Fonts\Hawaii_Killer.ttf#Hawaii Killer" 와 동일한 기능을 하게됩니다.

  7. 이제 프로젝트를 실행하면, 아래와 같은 화면이 출력됩니다.

    처음 로드가 완료된 화면에서는 XAML 코드에서 지정된 PageTitle TextBlock의 폰트가 변경되었음을 알 수 있으며,
    Change Font 버튼을 클릭하여 기본 폰트로 출력되던 텍스트가 새로운 폰트로 변경되었음을 두번째 화면에서 보실 수 있습니다.

참고하실 점은 아직까지는 한글 폰트에 대한 적용은 완전하지 않은 듯 합니다.
한글 폰트로 테스트해보았을때는 폰트의 적용이 제대로 되지 않았는데, 영문폰트로 교체하니 제대로 적용이되네요.
정식판이 나오면 수정되지 않을까하는 막연한 기대를 가져봅니다.

이번 글을 여기까지 입니다.
프로젝트 소스는 따로 첨부하여 드리니, 필요하신 분은 참고하시구요.
수고하셨구요. 끝까지 읽어주셔서 감사합니다.

댓글
댓글쓰기 폼