웹 사이트에 글꼴 추가

Adobe Fonts의 웹 글꼴은 웹 사이트, HTML 이메일 캠페인, Google의 AMP 형식의 문서 및 웹 글꼴이 지원되는 다른 많은 유형의 프로젝트에서 사용할 수 있습니다.

 

사용할 글꼴 선택

글꼴 라이브러리를 찾아보는 것으로 시작하십시오. 언어 및 쓰기 시스템 드롭다운 메뉴에서 필요한 언어 지원을 선택할 수 있습니다.

Adobe Fonts 검색 페이지

태그나 필터를 추가하여 글꼴 목록을 개선할 수 있습니다. 자연어 태그를 사용하여 프로젝트 분위기에 맞는 글꼴을 찾아보거나 분류(예: 세리프 또는 산세리프), 속성(x 높이, 폭 또는 두께) 또는 언어별로 필터링할 수 있습니다. 

Adobe Fonts 태그 찾아보기

웹 프로젝트 만들기

원하는 글꼴을 찾으면 </> 버튼을 클릭하여 웹 프로젝트에 패밀리를 추가하십시오.

글꼴 카드에서 웹 프로젝트 만들기

글꼴 이름을 클릭하여 패밀리 페이지를 열고 사용할 수 있는 모든 글꼴 두께와 스타일을 볼 수도 있습니다. 그런 다음 페이지 상단의 </> 웹 프로젝트에 추가를 클릭하여 패밀리를 웹 프로젝트에 추가하십시오.

글꼴 패밀리 페이지에서 새 웹 글꼴 프로젝트 추가

웹 프로젝트에 글꼴 추가 창에서 웹 프로젝트의 이름을 지정하고 포함할 글꼴을 결정합니다.

  1. 메뉴를 클릭하고 "새 프로젝트 만들기"를 선택합니다.
  2. 웹 프로젝트 이름을 지정합니다.
  3. 확인란을 사용하여 포함할 글꼴 두께와 스타일을 선택합니다.
  4. 프로젝트를 만듭니다.

나중에 내 Adobe 글꼴 페이지의 프로젝트 설정에서도 프로젝트 설정을 변경할 수 있습니다.

다음으로, 글꼴을 웹 사이트에 로드하기 위한 임베드 코드가 제공됩니다. 다른 옵션은 임베드 코드 도움말 페이지에 설명되어 있으며 기본 임베드 코드는 대부분의 프로젝트에서 제대로 작동합니다.

임베드 코드를 복사하여 웹 사이트에 있는 <head> 태그에 추가합니다.

완료를 클릭하여 웹 프로젝트 창을 닫고 계속 탐색합니다.  프로젝트에 글꼴을 더 추가하려면 다른 글꼴 패밀리에서 </> 버튼을 클릭한 다음 "새 프로젝트 만들기" 대신 메뉴에서 프로젝트 이름을 선택합니다.

웹 프로젝트 맞춤화

웹 프로젝트 및 추가한 모든 글꼴이 내 Adobe Fonts에 나열됩니다.

프로젝트 편집 버튼을 클릭하여 포함할 글꼴 두께 및 스타일을 변경하거나, 프로젝트에서 웹 글꼴 패밀리를 완전히 제거하거나, 글꼴 표시 설정을 지정합니다. 프로젝트의 언어 지원을 지정하는 웹 프로젝트 편집기에서 문자 세트를 변경할 수도 있습니다.  

wp-page

동아시아 글꼴은 동적 하위 설정이 제공되어야 하는 반면, 다른 글꼴에는 언어 기반 하위 설정 옵션(기본, 모든 문자 또는 사용자 정의 언어 하위 집합)이 있습니다. 언어 지원 및 하위 설정 도움말 페이지에는 다양한 옵션에 대한 자세한 정보가 있습니다.

“OpenType 기능” 상자를 선택하여 프로젝트에 모든 OpenType 기능을 포함시킬 수 있습니다. 이 상자를 선택하면 합자, 대체 문자 또는 작은 대문자와 같은 특정 웹 글꼴 패밀리에 사용할 수 있는 기능 목록도 표시됩니다.

글꼴 표시를 사용하면 웹 브라우저에 웹 글꼴이 로드되고 웹 사이트에 적용되는 방식을 지정할 수 있습니다. 이들 옵션에 대한 자세한 내용은 글꼴 표시 설정 도움말 페이지를 참조하십시오.

프로젝트를 원하는 방식으로 구성했으면 "변경 내용 저장"을 클릭하여 프로젝트를 저장합니다. 몇 분 내에 웹 사이트에서 업데이트를 사용할 수 있습니다.

CSS에 글꼴 적용

웹 프로젝트 페이지에는 프로젝트의 각 글꼴에 대한 CSS 글꼴 패밀리 이름, 숫자로 표기되는 두께 및 글꼴 스타일이 표시됩니다. CSS에서 이들 글꼴 패밀리 이름을 사용하여 텍스트에 글꼴을 적용합니다.

wp-page

Adobe 로고

내 계정 로그인