Příručka uživatele Zrušit

Embed codes

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

The embed code is how the web fonts are loaded into your website in the browser or into an HTML email in the email client.

The default and @import embed codes use only CSS for the font loading (no JavaScript); they can be used to add fonts to webpagesHTML email or newsletters, Google AMP, and many other types of projects where web fonts are supported. JavaScript font loading is used for dynamic subsetting, which is required for East Asian web font serving.

The embed code for each of your projects can be found on the Web Projects page.

Default embed code

The default embed code is a single <link> tag which loads the web project CSS from the font network (use.typekit.net) in the browser.

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

To find the default embed code for your project, visit the Web Projects page. Add this embed code to the <head> tag in your website.

@import embed code

The @import embed code can be used directly in your CSS stylesheet. To find the @import embed code for a project, visit the Web Projects page, then click on  the “@import link” option

Add it between style tags in the <head> of your website:

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

or place it at the top of your CSS file:

Adding an @import to your CSS

Poznámka:

If you use the @import embed code, it has to be at the beginning of the <style> tag or CSS file with any other @import statements or the fonts will not load. Only a @charset entry is allowed to be listed before the @import lines.

Using either of the CSS embed code options means that the rest of the page may not display until after the web font CSS has finished loading. The behavior varies between browsers, depending on how each handles external CSS files.

For asynchronous font loading that does not block the rest of the page, include another JavaScript library alongside the CSS embed code to customize your font loading.

JavaScript embed code

The JavaScript embed code is required for dynamic subsetting, which is used for East Asian web font serving.

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

The JavaScript embed code for a dynamic project is listed on the Web Projects page.

The advanced embed code can be customized by passing a configuration object to the Typekit.load method; see the JavaScript API section for details.

JavaScript API

The JavaScript exposes a global variable Typekit with one public method load. Calling "Typekit.load" without any arguments will trigger font loading.

Typekit.load()

You can also pass a configuration object to Typekit.load.

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

The following callbacks can be specified:

  • loading - This callback is triggered when all fonts have been requested.
  • active - This callback is triggered when the fonts have rendered.
  • inactive - This callback is triggered when the browser does not support linked fonts *or* if none of the fonts could be loaded.
  • fontloading - This callback is triggered once for each font that's loaded. The callback is called with the family name as the first argument and font variation description as the second argument.
  • fontactive - This callback is triggered once for each font that renders. The callback is called with the family name as the first argument and font variation description as the second argument.
  • fontinactive - This callback is triggered if the font can't be loaded. The callback is called with the family name as the first argument and font variation description as the second argument.

Changing the embed code in a website

If you have a website that is already using fonts via a legacy JavaScript embed code, you can switch to the newer CSS version by replacing the <script> tags in your code with the HTML <link> embed code or the CSS @import embed code.

Using legacy embed code in a website

Although Adobe occasionally changes the embed code options as we make improvements to font serving, all previous versions of the embed codes will continue to work.  

If you are using a legacy embed code in your website, you are not required to change it. However, many websites will benefit from performance improvements by updating to a newer version.

Previous versions of the embed code include a JavaScript version which loads the CSS file asynchronously:

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

and a protocol-relative JavaScript version:

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

(Even if your site is using the protocol-relative embed code, font serving uses HTTPS for all requests.)

Using multiple embed codes in a website

We do not recommend adding more than one embed code to the same webpage for several reasons:

  • Each copy of the embed code is mostly redundant.
  • Each project makes separate requests for fonts, which increases the number of HTTP requests and further slows loading.
  • A single project can be cached across all pages on your site after the first load.

 Adobe

Získejte pomoc rychleji a snáze

Nový uživatel?