[Silverlight Custom Font 적용]

매우 오랜만에 글을 쓰네요 창피창피...

그다지 Font에 관해서 신경을 쓰지 않고 넘어갔었는데, 이번에 디자이너 분들에게 요청을 받은 것이 기회가 되어 Custom Font 적용 방법을 찾아볼 수 있게 되었던 것 같아요.

우선 블렌드에서 Custom Font 적용하는 방법을 알아보도록 하죠.


1. 프로젝트를 생성하고 LayoutRoot의 Background 색상을 지정하고 TextBlock을 추가하였습니다.

2. TextBlock의 FontFamily를 Silverlight 에서 지원하지 않는 폰트로 지정해보겠습니다. 저는 Bradley Hand ITC 폰트를 선택하였습니다.

3. 폰트를 지정한 후, 텍스트 속성에서 몇 가지 작업을 수행해야 합니다.

- 포함을 체크합니다.
- 아니면,글꼴 관리자를 눌러 응용프로그램에 포함할 글꼴로 선택을 해줍니다.

4. 이후에 프로젝트 폴더를 확인해보면 Fonts 폴더가 생성된 것을 볼 수 있을 것입니다.

5. .XAML 파일에 생성된 코드도 확인해보죠 ^-^

<TextBlock Text="Good Day" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#Bradley Hand ITC"/>

다른 건 다 필요없고 FontFamily="Fonts/Fonts.zip#Bradley Hand ITC" 요 부분에 집중해 주세요!
생성된 Fonts 폴더 아래에 압축된 Fonts.zip에 있는 폰트 정보를 설정해주고 있습니다.

으잉? Fonts.zip?
갑자기 왠 .zip 파일일까요.

탐색기로 들어가 직접 프로젝트 폴더를 열어보도록 하죠.

프로젝트 하위 폴더의 Fonts 폴더가 생성되어 있습니다. 하지만 저 폴더를 열어도 Fonts.zip 파일은 없습니다.
obj → Debug 폴더로 경로를 이동하면,

여기에도 Fonts 폴더가 있네요. 한 번 열어볼까요?

옹, 여기에 있었군요. 이 .zip 파일을 열어보면 폰트가 들어있는 것을 확인할 수 있답니다.

자, Custom Font를 적용하였을 경우, 생성되는 결과물들을 확인하였고...
이제 프로젝트를 빌드시킨 후, 실행시켰을 때 본인이 원하는 폰트가 적용되었음을 확인할 수 있을 것입니다.

음... 그런데 한 가지 문제가 더 있습니다.
한글 폰트를 이 방법으로 적용시키려 할 경우, 적용이 쉽게 되지 않음을 알 수 있으실 거에요.

다음과 같이 나눔명조 폰트를 적용시켰을 경우, 생성되는 .XAML 코드는 똑같습니다.

<TextBlock Text="안녕하세요" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#나눔명조"/>

하지만 프로젝트를 빌드한 후, 실행을 시켜봐도 본인이 원하는 폰트가 적용되지 않았음을 확인하게 됩니다.

이 문제의 원인은 FontFamily에 폰트를 적용시킬 때, 한글 이름을 주어서 발생하는 문제입니다.
때문에 해당 폰트의 속성으로 들어가서 자세히 탭에서 영어 이름을 알아내어 적용시켜 주시면 됩니다.

나눔명조의 영어 이름을 알아내었으니 실제 .XAML 코드에 적용시켜 보도록 하죠!

<TextBlock Text="안녕하세요" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontFamily="Fonts/Fonts.zip#NanumMyeongjo"/>

자~ 이제 빌드하고, 실행시켜보면...

예쁘게 나눔명조 폰트가 적용되었습니다! ^-^)/

이렇게 해당 폰트의 속성창으로 들어가서 영어 이름을 확인하시는 방법도 있지만, 공도씨의 블로그에 가 보시면 폰트의 영어 이름을 검색하여 쉽게 알아낼 수 있는 프로그램이 공개되어 있습니다.
그 프로그램을 다운받아 검색란에 폰트의 이름을 검색하면 영어 이름을 보다 간편하게 알아낼 수 있습니다.
검색 기준 폴더는 윈도우즈 폴더의 Fonts 폴더같고요.

이상 Blend 에서 Custom Font 적용 방법에 대한 글을 마치도록 하겠습니다.

아쟈아쟈아쟈!