사용 안내서 취소

CodePen에서 웹 글꼴 사용하기

  1. Adobe Fonts 사용 안내서
  2. 소개
    1. 시스템 및 구독 요구 사항
    2. 브라우저 및 OS 지원
    3. 컴퓨터에서 글꼴 추가
    4. 웹 사이트에 글꼴 추가
    5. CC Mobile에서 글꼴 추가
  3. 글꼴 라이선싱
    1. Adobe Fonts에서 추가된 글꼴
    2. Adobe Fonts의 웹 글꼴
    3. 기업 고객용 Creative Cloud
    4. 제거된 글꼴
    5. 이들 글꼴이 내 Creative Cloud 구독에 포함되지 않은 이유는 무엇입니까?
    6. Adobe Fonts에서 글꼴에 대한 라이선스를 구매하라는 메시지가 표시되는 이유는 무엇입니까?
    7. 중국에서 등록된 Adobe ID로는 Adobe Fonts를 사용할 수 없습니다.
  4. 글꼴 다운로드 및 사용하기
    1. Creative Cloud 앱에서 Adobe Fonts 사용하기
    2. 내 글꼴 관리
    3. 이미지에서 글꼴 찾기
    4. 데스크탑 애플리케이션에서 누락된 글꼴 문제 해결
    5. InDesign에서 글꼴 사용하기
    6. 글꼴 및 타이포그래피
    7. HTML5 Canvas 문서에서 웹 글꼴 사용하기
    8. InCopy에서 글꼴 사용하기
    9. Muse에서 웹 글꼴 사용하기
    10. 글꼴 파일 패키징
    11. 문제 해결 안내서: 글꼴 추가하기
    12. 추가된 글꼴이 글꼴 메뉴에 표시되지 않음
    13. “하나 이상의 글꼴을 추가할 수 없음” 또는 “동일한 이름의 글꼴이 이미 설치되어 있음”
    14. 사용하고 있는 글꼴을 제작자가 업데이트하면 어떻게 됩니까?
    15. Adobe 프로그램에서 글꼴 숨기기
  5. 웹 디자인 및 개발
    1. 웹 사이트에 글꼴 추가
    2. 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
    3. 글꼴 문제 해결
    4. HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
    5. AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
    6. CSS 선택기
    7. 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
    8. 임베드 코드
    9. 동적 하위 집합 및 웹 글꼴 제공
    10. 글꼴 이벤트
    11. 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
    12. 사이트가 use.typekit.net에 연결되지 않습니다.
    13. CodePen에서 웹 글꼴 사용하기
    14. 브라우저 및 OS 지원
    15. 도메인
    16. 로컬에서 개발 시 웹 글꼴 사용하기
    17. 콘텐츠 보안 정책
    18. 웹 글꼴 인쇄하기
  6. 언어 지원 및 OpenType 기능
    1. 언어 지원 및 하위 집합
    2. OpenType 기능 사용하기
    3. CSS의 OpenType 기능에 대한 구문
  7. 글꼴 기술
    1. OpenType-SVG 색상 글꼴
    2. Ten Mincho: 버전 1.000에서 업데이트 시 중요 사항

CodePen은 브라우저에서 바로 코드를 실험할 수 있는 웹 기반 HTML, CSS 및 JavaScript 코드 편집기입니다. 펜에서 바로 맞춤형 웹 글꼴을 사용할 수 있습니다.

사용할 글꼴 선택

웹 글꼴 튜토리얼을 따라 몇 가지 글꼴을 선택하고 웹 프로젝트를 만듭니다.

펜에 임베드 코드 추가

HTML 편집기의 설정 메뉴에 있는 "<head>의 항목" 필드 또는 "CSS > 외부 CSS 추가"메뉴에서 CodePen UI에 임베드 코드를 추가할 수 있습니다.

프로젝트의 임베드 코드를 확인하려면 웹 프로젝트 페이지로 이동하여 프로젝트 이름을 찾습니다. 해당 프로젝트에 대한 기본 CSS 임베드 코드를 복사하여 이러한 위치들 중 하나에 붙여넣습니다.

기본 CSS 임베드 코드와 함께 CodePen 사용

CSS 파일을 직접 연결하여 CodePen 사용

CSS에 글꼴 적용

이제 펜의 CSS 편집기에서 글꼴 패밀리 이름을 사용할 수 있으며 글꼴이 라이브 뷰에 즉시 표시됩니다.

웹 글꼴이 적용된 CodePen 편집기

CSS에서 사용할 글꼴 패밀리 이름도 웹 프로젝트에 나열됩니다. CSS에서 글꼴 사용을 참조하십시오.

웹 프로젝트 페이지의 CSS 정보

펜 포크하기

공용 펜을 포크하여 다른 사용자가 코드를 작성할 수 있습니다. 웹 글꼴은 포크된 펜에서도 작동합니다.

프로젝트 삭제 또는 구독 취소

CodePen에서 사용 중인 프로젝트를 삭제하거나 구독을 취소하면 임베드 코드를 사용하는 모든 펜에서 더 이상 글꼴을 사용할 수 없습니다. 여기에는 원래의 펜과 이 펜에서 포크된 모든 펜이 포함됩니다. CSS에 지정된 대체 글꼴이 맞춤형 웹 글꼴 대신 적용됩니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?