웹 사이트에 글꼴 추가

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

Adobe Fonts 웹 서비스를 이용하려면 해당 서비스가 제공하는 임베드 코드를 통해 웹 글꼴을 사용해야 합니다. 사용 약관에서는 웹 글꼴 파일을 자체적으로 호스팅하거나 웹 사이트 디자인 플랫폼에 업로드하는 것을 허용하지 않습니다.

사용할 글꼴 선택

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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