사용 안내서 취소

임베드 코드

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

임베드 코드는 웹 글꼴이 브라우저의 웹 사이트 또는 이메일 클라이언트의 HTML 이메일에 로드되는 방법입니다.

기본 및 @import 임베드 코드는 글꼴 로드에 CSS만 사용합니다(JavaScript 아님). 웹 페이지HTML 이메일 또는 뉴스레터, Google AMP 및 웹 글꼴이 지원되는 다른 많은 유형의 프로젝트에 글꼴을 추가하는 데 사용할 수 있습니다. JavaScript 글꼴 로드는 동아시아 웹 글꼴 제공에 필요한 동적 하위 집합에 사용됩니다.

각 프로젝트의 임베드 코드는 웹 프로젝트 페이지에 있습니다.

기본 임베드 코드

기본 임베드 코드는 브라우저에서 글꼴 네트워크(use.typekit.net)로부터 웹 프로젝트 CSS를 로드하는 단일 <link> 태그입니다.

<link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/xxxxxxx.css&quot;>

프로젝트의 기본 임베드 코드는 웹 프로젝트 페이지에서 확인하십시오. 이 임베드 코드를 웹 사이트에 있는 <head> 태그에 추가합니다.

이미지

@import 임베드 코드

@import 임베드 코드는 CSS 스타일시트에서 바로 사용할 수 있습니다. 프로젝트를 위한 @import 임베드 코드를 확인하려면 웹 프로젝트 페이지로 이동한 다음 "@import link" 옵션을 클릭합니다.

이미지

웹 사이트의 <head>에서 style태그 사이에 추가합니다.

<style>
  @import url(&quot;https://use.typekit.net/xxxxxxx.css&quot;);
</style>

또는 CSS 파일 상단에 배치합니다.

CSS에 @import 추가

참고:

@import 임베드 코드를 사용하는 경우 다른 @import 문과 함께 <style> 태그 또는 CSS 파일의 시작 부분에 있어야 합니다. 그렇지 않으면 글꼴이 로드되지 않습니다. @charset 항목만 @import 줄 앞에 나열될 수 있습니다.

CSS 임베드 코드 옵션 중 하나를 사용하면 웹 글꼴 CSS가 로드를 완료할 때까지 페이지의 나머지 부분이 표시되지 않을 수 있습니다. 동작은 각 브라우저가 외부 CSS 파일을 처리하는 방법에 따라 다릅니다.

페이지의 나머지 부분을 차단하지 않는 비동기 글꼴 로드의 경우 CSS 임베드 코드와 함께 다른 JavaScript 라이브러리를 포함하여 글꼴 로드를 맞춤화합니다.

JavaScript 임베드 코드

JavaScript 임베드 코드는 동아시아 웹 글꼴 제공에 사용되는 동적 하위 집합에 필요합니다.

<script>
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,&quot;&quot;)+&quot; wf-inactive&quot;;},config.scriptTimeout),tk=d.createElement(&quot;script&quot;),f=false,s=d.getElementsByTagName(&quot;script&quot;)[0],a;h.className+=&quot; wf-loading&quot;;tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=&quot;complete&quot;&&a!=&quot;loaded&quot;)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

동적 프로젝트에 대한 JavaScript 임베드 코드는 웹 프로젝트 페이지에 나열되어 있습니다.

이미지

고급 임베드 코드는 구성 개체를 Typekit.load 메서드에 전달하여 맞춤화할 수 있습니다. 자세한 내용은 JavaScript API 섹션을 참조하십시오.

JavaScript API

JavaScript는 하나의 공용 메서드 로드로  Typekit 전역 변수를 노출합니다. 인수 없이 "Typekit.load"를 호출하면 글꼴 로드가 트리거됩니다.

Typekit.load()

구성 오브젝트를 Typekit.load에 전달할 수도 있습니다.

Typekit.load({
      // configuration…
 });

다음 콜백을 지정할 수 있습니다.

  • loading - 이 콜백은 모든 글꼴이 요청되었을 때 트리거됩니다.
  • active -이 콜백은 글꼴이 렌더링될 때 트리거됩니다.
  • inactive - 이 콜백은 브라우저가 링크된 글꼴을 지원하지 않거나 로드할 수 있는 글꼴이 없을 때 트리거됩니다.
  • fontloading - 이 콜백은 로드된 각 글꼴에 대해 한 번씩 트리거됩니다. 콜백은 패밀리 이름을 첫 번째 인수로, 글꼴 변형 설명을 두 번째 인수로 사용하여 호출됩니다.
  • fontactive - 이 콜백은 렌더링되는 각 글꼴에 대해 한 번씩 트리거됩니다. 콜백은 패밀리 이름을 첫 번째 인수로, 글꼴 변형 설명을 두 번째 인수로 사용하여 호출됩니다.
  • fontinactive -이 콜백은 글꼴을 로드할 수 없는 경우 트리거됩니다. 콜백은 패밀리 이름을 첫 번째 인수로, 글꼴 변형 설명을 두 번째 인수로 사용하여 호출됩니다.

웹 사이트에서 임베드 코드 변경

레거시 JavaScript 임베드 코드를 통해 이미 글꼴을 사용하고 있는 웹 사이트가 있는 경우 코드의<script> 태그를 HTML <link> 임베드 코드 또는 CSS @import 임베드 코드로 대체하여 최신 CSS 버전으로 전환할 수 있습니다.

웹 사이트에서 레거시 임베드 코드 사용

Adobe는 글꼴 제공을 개선하면서 때때로 임베드 코드 옵션을 변경하지만 이전 버전의 임베드 코드는 모두 계속 작동합니다.  

웹 사이트에서 레거시 임베드 코드를 사용하고 있다면 이를 변경할 필요는 없습니다. 그러나 최신 버전으로 업데이트하면 대부분의 웹 사이트에서 성능 향상의 이점을 얻을 수 있습니다.

이전 버전의 임베드 코드에는 CSS 파일을 비동기적으로 로드하는 JavaScript 버전이 포함되어 있습니다.

<script src=&quot;https://use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

프로토콜 관련 JavaScript 버전도 포함되어 있습니다.

<script src=&quot;//use.typekit.net/xxxxxxx.js&quot;></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

(사이트에서 프로토콜 상대적 임베드 코드를 사용하는 경우에도 글꼴 제공은 모든 요청에 HTTPS를 사용합니다.)

웹 사이트에서 여러 임베드 코드 사용

다음과 같은 여러 가지 이유로 동일한 웹 페이지에 엠베드 코드를 두 개 이상 추가하지 않는 것이 좋습니다.

  • 임베드 코드의 각 사본은 대부분 중복됩니다.
  • 각 프로젝트는 별도로 글꼴 요청을 진행하므로 HTTP 요청 수가 증가하고 로드 속도가 더욱 느려집니다.
  • 첫 번째 로드 후 사이트의 모든 페이지에서 단일 프로젝트를 캐시할 수 있습니다.

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX 2024

Adobe MAX
크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인

Adobe MAX

크리에이티비티 컨퍼런스

10월 14~16일 마이애미 비치 및 온라인