마지막 업데이트 날짜
2022년 11월 28일
- Adobe Fonts 사용 안내서
- 소개
- 글꼴 라이선싱
- 글꼴 다운로드 및 사용하기
- 웹 디자인 및 개발
- 웹 사이트에 글꼴 추가
- 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
- 글꼴 문제 해결
- HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
- AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
- CSS 선택기
- 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
- 임베드 코드
- 동적 하위 집합 및 웹 글꼴 제공
- 글꼴 이벤트
- 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
- 사이트가 use.typekit.net에 연결되지 않습니다.
- CodePen에서 웹 글꼴 사용하기
- 브라우저 및 OS 지원
- 도메인
- 로컬에서 개발 시 웹 글꼴 사용하기
- 콘텐츠 보안 정책
- 웹 글꼴 인쇄하기
- 언어 지원 및 OpenType 기능
- 글꼴 기술
CodePen은 브라우저에서 바로 코드를 실험할 수 있는 웹 기반 HTML, CSS 및 JavaScript 코드 편집기입니다. 펜에서 바로 맞춤형 웹 글꼴을 사용할 수 있습니다.
사용할 글꼴 선택
웹 글꼴 튜토리얼을 따라 몇 가지 글꼴을 선택하고 웹 프로젝트를 만듭니다.
펜에 임베드 코드 추가
HTML 편집기의 설정 메뉴에 있는 "<head>의 항목" 필드 또는 "CSS > 외부 CSS 추가"메뉴에서 CodePen UI에 임베드 코드를 추가할 수 있습니다.
프로젝트의 임베드 코드를 확인하려면 웹 프로젝트 페이지로 이동하여 프로젝트 이름을 찾습니다. 해당 프로젝트에 대한 기본 CSS 임베드 코드를 복사하여 이러한 위치들 중 하나에 붙여넣습니다.
CSS에 글꼴 적용
이제 펜의 CSS 편집기에서 글꼴 패밀리 이름을 사용할 수 있으며 글꼴이 라이브 뷰에 즉시 표시됩니다.
CSS에서 사용할 글꼴 패밀리 이름도 웹 프로젝트에 나열됩니다. CSS에서 글꼴 사용을 참조하십시오.
펜 포크하기
공용 펜을 포크하여 다른 사용자가 코드를 작성할 수 있습니다. 웹 글꼴은 포크된 펜에서도 작동합니다.
프로젝트 삭제 또는 구독 취소
CodePen에서 사용 중인 프로젝트를 삭제하거나 구독을 취소하면 임베드 코드를 사용하는 모든 펜에서 더 이상 글꼴을 사용할 수 없습니다. 여기에는 원래의 펜과 이 펜에서 포크된 모든 펜이 포함됩니다. CSS에 지정된 대체 글꼴이 맞춤형 웹 글꼴 대신 적용됩니다.
