사용자 지정 글꼴 포함

  • 아티클

Windows 스토어 앱에 사용자 지정 글꼴을 포함하면 더욱 다양한 글꼴 패밀리 및 스타일을 선택하여 디자인에 적용할 수 있을 뿐 아니라, 선택한 글꼴을 모든 앱 사용자가 사용할 수 있습니다. 원하는 검색 엔진을 사용하여 다운로드할 모든 글꼴 종류를 찾을 수 있지만 Windows 스토어 앱에는 다음 글꼴 유형만 포함할 수 있습니다.

  • 웹 개방형 글꼴 형식(.woff) 파일

  • 포함된 OpenType(.eot) 파일

  • 글꼴 포함 가능성이 설치 가능으로 설정된 트루 타입(.ttf) 또는 OpenType(.otf) 파일

    글꼴 파일을 마우스 오른쪽 단추로 클릭하고 속성을 클릭한 다음 세부 정보 탭을 클릭하면 유형 및 글꼴 포함 가능성 설정을 확인할 수 있습니다.

    Blend 글꼴 이식성

중요

대부분의 소프트웨어와 마찬가지로 글꼴 파일도 판매되는 것이 아니라 사용이 허가됩니다.글꼴 사용을 관리하는 라이선스는 공급업체마다 다르지만 일반적으로 Microsoft가 응용 프로그램 및 Windows에 제공하는 글꼴을 관리하는 라이선스를 비롯하여 대부분의 라이선스에서는 응용 프로그램 내에 글꼴을 포함하거나 기타 다른 방법으로 재배포하는 것을 허용하지 않습니다.따라서 개발자는 응용 프로그램 내에 포함하거나 기타 다른 방법으로 재배포하려는 글꼴에 대해 필요한 라이선스 권한이 있는지 확인해야 합니다.

이 항목에서는 다음 작업을 수행하는 방법을 배웁니다.

프로젝트에 글꼴 파일 추가

프로젝트에 글꼴 파일을 추가하려면 다음을 수행합니다.

  • 프로젝트 메뉴를 열고 기존 항목 추가 클릭

  • Ctrl+I 누르기

  • 복사하여 붙여넣기

  • 끌기

중요

Fonts 폴더(C:\windows\fonts)에서 파일을 추가하려면 로컬 컴퓨터에 대한 관리자 권한이 필요합니다.

프로젝트에 포함할 글꼴 파일에 대한 폴더를 반드시 만들 필요는 없지만 만드는 것이 좋습니다.

폴더를 만들려면

  • 프로젝트 패널을 마우스 오른쪽 단추로 클릭한 후 새 폴더 추가를 클릭하고 폴더의 이름을 fonts로 지정합니다.

글꼴 파일을 추가하려면

  1. 프로젝트 패널에서 font 폴더를 선택하고 프로젝트 메뉴를 연 다음 기존 항목 추가(Ctrl+I)를 클릭합니다.

  2. 기존 항목 추가 대화 상자에서 추가할 글꼴 파일을 찾은 다음 열기를 클릭합니다.

    팁

    Ctrl 키를 누른 채 각 파일을 연속으로 클릭하면 여러 글꼴 파일을 지정할 수 있습니다.

  3. 이 단계에서 다음을 수행할 수 있습니다.

    • 글꼴을 새로운 또는 기존 @font-face 규칙에 추가하지 않으려면 취소를 클릭합니다. 글꼴 파일은 계속 프로젝트에 추가되지만 @font-face 규칙은 만들어지지 않습니다.

    • 글꼴을 기존 @font-face 규칙에 추가하려면 해당 글꼴을 대상으로 지정하는 @font-face 규칙 만들기 확인란 선택을 취소하고 확인을 클릭합니다.

    • 방금 추가한 글꼴을 대상으로 하는 @font-face 규칙을 만들려면 해당 글꼴을 대상으로 지정하는 @font-face 규칙 만들기 확인란을 선택해야 합니다.

      참고

      여러 파일을 추가한 경우에도 글꼴 패밀리 필드에는 하나의 글꼴 이름만 표시됩니다.여러 파일을 추가하고 해당 글꼴을 대상으로 지정하는 @font-face 규칙 만들기 확인란을 선택하면 모든 글꼴이 동일한 @font-face 규칙에 추가됩니다.

    Blend 선택한 글꼴 추가

  4. 방금 추가한 글꼴을 대상으로 하는 @font-face 규칙을 만들려면 다음 섹션을 계속 진행하십시오.

@Font-face 규칙 만들기

사용자 지정 글꼴을 앱에서 사용하려면 @font-face 규칙을 만들어야 합니다. @font-face 규칙은 글꼴 패밀리(예: 글꼴의 일반, 굵게 및 기울임꼴 버전) 또는 단일 글꼴(예: 글꼴의 기울임꼴 버전만)을 대상으로 할 수 있습니다. 각 서체는 한 글꼴 파일에서만 구현됩니다.

Limelight는 하나의 글꼴 파일을 구성합니다.Quicksand는 6개의 글꼴 파일을 구성합니다.아이콘이 누적된 파일 모양이면 글꼴 패밀리가 여러 글꼴로 구성되었다는 의미입니다.

Blend <span class=@font-face" title="Blend @font-face" />

예를 들어 Quicksand 일반 글꼴을 사용하려면 font-family 속성이 Quicksand로 설정된 @font-face 규칙을 만듭니다.

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

굵은 글꼴로 나타나는 모든 텍스트에 Quicksand 굵게 글꼴을 사용하려면 font-family 속성이 Quicksand로, font-weight 속성이 bold로 설정된 추가 @font-face 규칙을 만듭니다.

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

@font-face {
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Bold.otf') format('opentype');
       font-weight: bold;
}

Blend에서 다음 중 하나를 수행하여 @font-face 규칙을 만들거나 편집할 수 있습니다.

  • 기존 항목 추가 대화 상자에서 해당 글꼴을 대상으로 지정하는 @font-face 규칙 만들기 확인란을 선택한 후 확인을 클릭합니다. (이전 절차의 3단계 참조)

  • 프로젝트 창에서 글꼴 파일을 마우스 오른쪽 단추로 클릭한 다음 새로운 @font-face 규칙 만들기 또는 기존 @font-face 규칙에 추가를 클릭합니다.

  • 스타일 규칙 창에서 .css 파일을 마우스 오른쪽 단추로 클릭하고 규칙 추가를 클릭한 다음 @font-face 규칙 추가를 클릭합니다.

  • 스타일 규칙 창에서 @font-face 규칙을 마우스 오른쪽 단추로 클릭한 다음 @font-face 규칙 편집을 클릭합니다.

이러한 각 옵션은 @font-face 규칙에 대한 속성을 정의할 수 있는 @font-face 편집기를 엽니다.

다음 절차에서는 Quicksand 굵게 글꼴에 대해 @font-face 규칙을 만드는 방법을 안내합니다.

@font-face 규칙을 만들려면

  1. 참고

    이 절차는 이전 섹션의 "글꼴 파일을 추가하려면" 절차에서 계속 연결됩니다.

    @font-face 규칙에 선택한 글꼴 추가 대화 상자에서 해당 글꼴을 대상으로 지정하는 @font-face 규칙 만들기 확인란을 선택한 후 확인을 클릭합니다.

    한 번에 여러 파일을 추가하는 경우 @font-face 편집기에는 모든 글꼴 파일이 글꼴 패밀리의 소스 파일로 포함되며, font-family 이름은 추가한 파일 목록에 있는 첫 번째 파일과 동일하게 지정됩니다. 그러나 특정 글꼴 파일을 대상으로 하고 해당 파일의 속성을 설정해야 할 때가 있습니다.

  2. 글꼴 패밀리 상자에 Quicksand를 입력합니다.

  3. src 목록에서 Quicksand-Bold.otf만 남을 때까지 각 소스 파일 오른쪽에 있는 빼기 기호(-)를 클릭하여 소스 파일을 제거합니다.

    실수로 Quicksand-Bold.otf를 제거한 경우 소스 추가 아이콘을 클릭하고 opentype을 클릭하여 다시 추가할 수 있습니다. opentype 목록에서 Quicksand Bold.otf를 클릭합니다.

  4. 글꼴 두께 목록에서 굵게를 클릭한 다음 확인을 클릭합니다.

    Blend <span class=@font-face 규칙 추가" title="Blend @font-face 규칙 추가" />

  5. 다른 글꼴 파일을 대상으로 하는 추가 @font-face 규칙을 만들려면 속성 패널에서 대상으로 할 글꼴 파일을 마우스 오른쪽 단추로 클릭한 다음 2-4단계를 반복합니다.

팁

@font-face 규칙을 만들면 활성 .css 파일에서 삽입 지점 뒤에 추가됩니다.스타일 규칙 창에 표시된 노란색 줄은 삽입 지점을 의미합니다.

선택한 텍스트에 사용자 지정 글꼴 적용

프로젝트에 사용자 지정 글꼴을 추가하고 @font-face 규칙을 만든 후에는 CSS 속성 패널의 글꼴 패밀리 드롭다운 목록에 있는 @font-face 글꼴 섹션에서 선택하여 글꼴을 적용할 수 있습니다.

다음 절차에서는 Blend를 사용하여 첫 Windows 스토어 앱 만들기, 1부: 마스터 페이지(HTML 및 JavaScript)에서 만든 동영상 앱인 PickaFlick 프로젝트에 Limelight 글꼴을 추가합니다.

사용자 지정 글꼴을 적용하려면

  1. 사용자 지정 글꼴을 적용할 텍스트를 선택합니다.

  2. CSS 속성 패널의 글꼴 범주에서 글꼴 패밀리 목록의 새 글꼴을 클릭합니다.

    팁

    추가한 글꼴이 @font-face 글꼴 목록에 포함된 것을 확인할 수 있습니다.

    Blend 사용자 지정 글꼴이 포함된 글꼴 패밀리 드롭다운 목록

    지정한 텍스트가 @font-face 글꼴로 표시됩니다.

    Blend 사용자 지정 글꼴 전과 후