사용 안내서 취소

임베드 코드

검색

마지막 업데이트 날짜 2022년 11월 28일

임베드 코드는 웹 글꼴이 브라우저의 웹 사이트 또는 이메일 클라이언트의 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 파일 상단에 배치합니다.

참고:

@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 요청 수가 증가하고 로드 속도가 더욱 느려집니다.
첫 번째 로드 후 사이트의 모든 페이지에서 단일 프로젝트를 캐시할 수 있습니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?