We’re excited to ship one of your all-time most requested features: you can now add fonts to your web site using only CSS (Cascading Style Sheets)—no JavaScript required. Also, you can now use fonts from Typekit in HTML email campaigns, mobile articles in Google’s AMP format, or anywhere else CSS web fonts are supported.

Turn on Early Access and you’ll see the new CSS-only embed code in our kit editor, available as an HTML link tag or CSS @import statement. Your existing websites and kits will continue to work with the default JavaScript embed code, and you will now be presented with the new CSS embed code whenever you create a new kit, or when you access an existing kit’s embed code.

CSS kits will finally allow you to use web fonts from Typekit in places our previous reliance on JavaScript prevented us from supporting, such as:

• HTML email. You can now use fonts from Typekit in emails. Many email clients support HTML and CSS, but not JavaScript. Style your email campaigns with beautiful typography from the Typekit library, and stand out from the rest.
• Google AMP. You don’t have to sacrifice style for speed – use your Typekit web fonts with mobile article formats to reach a wider audience. Google AMP is now compatible with our CSS embed code.
• Custom stylesheets. Some web page builders or other web based software (like wikis) allow you to edit CSS but not HTML. You can add fonts from Typekit to those sites by using the @import version of the CSS embed code.

For more details and step-by-step support, check out our guide to getting started with CSS-only web font serving.

Which embed code format should I use?

Either embed code gives you control over the OpenType features and language support in your site’s web fonts; you can still configure these options in our kit editor.

For most web developers, the CSS embed code is the most efficient way to add web fonts to your site. Using only CSS to deliver web fonts allows you to take advantage of newer advances in how browsers load and render fonts, and removing JavaScript code and execution from the loading process should provide a small but welcome speed boost.

The advanced JavaScript embed code is still the right choice for sites that use East Asian web fonts, which depend on our JavaScript-based dynamic subsetting feature for support.

For advanced users or in specific use cases, our JavaScript embed code gives you fine-tuned control over how fonts are loaded.

• If you don’t want to block the page until fonts are loaded, use our advanced embed code with async: true turned on. This will result in an initial flash of unstyled text (FOUT), but will allow your page content to load immediately, with fonts swapped in as they are loaded by the browser.
• Network blips, routing failures, or service downtime could all potentially affect your fonts. The advanced embed code gives you control over functionality such as font loading behavior and timeouts.
• The advanced embed code loads both the JavaScript file and fonts asynchronously into your site for optimal performance.

Browser support

All of the same browsers and versions that currently support JavaScript web font serving will also support CSS web font serving. See a detailed listing of support.

We want your feedback!

We release features into Early Access because we feel confident that they are ready to use, and we’d like you to give it a try, test its limits, and let us know how you feel about the change before it becomes a core part of our product.

Please give us your feedback via the comments, Twitter, or directly to our support team at support@typekit.com. We hope you enjoy the new simplicity of using Typekit in your web projects as much as we do!