CodePen에서 웹 글꼴 사용하기

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

사용할 글꼴 선택

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

펜에 임베드 코드 추가

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

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

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

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

CSS에 글꼴 적용

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

웹 글꼴이 적용된 CodePen 편집기

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

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

펜 포크하기

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

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

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

Adobe 로고

내 계정 로그인