참고:

  Typekit은 이제 Adobe Fonts로 이름이 변경되었으며 Creative Cloud 및 기타 구독에 포함됩니다. 자세히 알아보기

Adobe Fonts의 웹 글꼴을 사용한 작업

Adobe Fonts의 웹 글꼴을 이제 Adobe Animate CC의 HTML5 Canvas 문서에 사용할 수 있습니다.

Adobe Fonts가 Animate CC와 통합되어 고품질 제작업체의 프리미엄 웹 글꼴 수천 개를 HTML5 Canvas 문서에서 즉시 사용할 수 있습니다.

모든 수준의 Creative Cloud 플랜에서 Adobe Fonts 라이브러리의 제한된 일부 글꼴을 사용해 볼 수 있으며, 유료 플랜을 구독한 경우에는 수천 개의 글꼴이 포함된 전체 라이브러리에 액세스할 수 있습니다.

Adobe Fonts의 구독 계획에 대한 자세한 내용은 Adobe Fonts를 통한 웹 글꼴 호스팅을 참조하십시오.

자체 호스팅되는 웹 글꼴과 달리, Adobe Fonts에서는 사용자가 호스팅되는 내용에서 사용하기로 결정하는 글꼴이 호스팅됩니다. Adobe Fonts 라이브러리에서 글꼴을 선택한 후 웹에서 문서를 제작할 경우 Adobe Fonts에서 해당 글꼴을 자동으로 호스팅하고 해당 Adobe Fonts 계정을 웹상의 내용에 연결합니다.

Adobe Fonts 라이브러리는 Creative Cloud 구독을 통해 사용할 수 있습니다. 자세한 내용은 https://fonts.adobe.com을 참조하십시오. 새 Adobe Fonts를 구입할 수도 있습니다. Animate CC를 다시 실행하면 Adobe Fonts 화면의 [모든 글꼴] 탭에서 구입한 글꼴을 확인할 수 있습니다.

HTML5 Canvas 문서에서 웹 글꼴 사용

  1. HTML5 Canvas 문서를 열고 도구 패널에서 [텍스트] 도구를 선택합니다.

  2. [속성] 패널에서 동적 텍스트를 선택하고 글꼴 집합 드롭다운 상자 옆에 있는 [웹 글꼴 추가] 버튼을 클릭합니다.

    TypeKit-Selection
  3. 나타나는 웹 글꼴 추가 창에서 시작하기를 클릭합니다.  

    Adobe Fonts 추가
    Adobe Fonts 추가
  4. Adobe Fonts 추가 대화 상자에는 해당 Creative Cloud 구독 플랜에서 사용할 수 있는 모든 Adobe Fonts가 표시됩니다. 이제 글꼴을 찾아보거나, 특정 글꼴을 검색하거나, 글꼴 속성을 기준으로 필터링하여 해당 디자인 요구 사항에 가장 적합한 글꼴을 선택할 수 있습니다.

    필터를 클릭하면 다음 필터를 활용할 수 있습니다.

    • 분류: Serif, Sans Serif, Script 같은 분류를 기준으로 웹 글꼴을 필터링할 수 있습니다.
    • 권장 용도: 단락 또는 제목에 맞는 웹 글꼴의 권장 용도를 기준으로 글꼴을 필터링합니다.
    • 속성: 굵기, 폭, 높이 등 속성을 기준으로 필터링합니다.
    Adobe Fonts 추가 대화 상자
    Adobe Fonts 추가 대화 상자
  5. 사용하려는 글꼴을 찾은 후 해당 글꼴을 클릭하기만 하면 됩니다. 확인 표시는 해당 글꼴이 선택되었음을 의미합니다. 한 번에 여러 글꼴을 선택하여 추가할 수 있습니다. [선택한 글꼴] 탭에는 선택한 모든 글꼴이 표시됩니다.

    글꼴 미리 보기 바닥글을 클릭하여 가늘게, 굵게, 기울임체 등 모든 변형을 확인할 수 있습니다.

    글꼴 선택
    글꼴 선택

    확인을 클릭하여 선택한 글꼴을 추가합니다. 

    selected-web-font-family-menu
    selected-web-font-family-menu
  6. 추가된 웹 글꼴을 선택하여 HTML5 Canvas 문서에서 사용합니다.

    font-in-use
    선택한 글꼴을 문서에서 사용

  7. 웹에서 내용을 제작하기 전에 제작 설정을 열고 웹 글꼴 탭을 클릭한 후 해당 HTML5 내용을 호스팅할 페이지의 URL을 지정합니다. 예를 들면 www.adobe.com 등입니다. 쉼표로 구분된 여러 URL을 지정할 수도 있습니다.

    웹 글꼴 URL 대화 상자
    웹 글꼴 URL 대화 상자

    참고:

    • Adobe Fonts의 웹 글꼴은 제작 설정에 표시되는 도메인 이름에만 로드됩니다. 글꼴이 작동하지 않거나 웹 페이지의 Adobe Fonts에서 403 오류가 표시되는 경우 해당 목록에 웹 사이트 도메인을 포함했는지 확인한 후 프로젝트를 다시 제작하십시오.
    • [동영상 테스트] 옵션을 통해 생성된 출력은 미리 보기 전용입니다. 최종 배포용 출력을 생성하려면 파일 > 제작 옵션을 사용하십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책