Notă:

Typekit is now Adobe Fonts

We used to organize web fonts for a particular site into a kit; now we call that a web project.

The fonts are still added to your website with the embed code that we provide–which is explained in this tutorial–and include the same font licensing. Learn more about Adobe Fonts.

Web fonts from Adobe Fonts can be used on your websites, HTML email campaigns, articles in Google’s AMP format, and many other types of projects where web fonts are supported.

Choose fonts to use

Start by browsing the library of fonts. You can toggle between the default & Japanese font collections from the mode selector at the top of the page.

Switching between font collections on fonts.adobe.com

Add filters to refine the list of fonts. You can filter by classification (such as serif or sans serif), properties (x-height, width, or weight), or language. You can also choose between two “recommended” categories: headings and paragraphs; these fonts display especially well at those sizes across all browsers and operating systems.

The collection of Japanese fonts has different filtering options, so you can browse for kana-only fonts or by style classifications like Mincho, Gothic, Maru Gothic, and Brush.

Browsing the library of Japanese fonts

Create a web project

When you find a font you like, click the </> button to add the family to a web project.

Creating a web project from a font card

You can also click on the font name to open the family page and see all of the font weights and styles that are available to use. Then click </> Add to Web Project at the top of the page to add the family to a web project.

Creating a web project from the font family page.

In the Add fonts to a Web Project window, you'll name your web project and decide which fonts should be included.

  1. Click on the menu and choose “Create a new project”
  2. Name your web project
  3. Use the checkboxes to select the font weights and styles you want to include.
  4. Create the project.

You'll be able to make changes to the project settings from the My Adobe Fonts page later, too.

Creating a project: choose a name and select the font styles.

Next, you’ll be given the embed code to load the fonts into your website. The different options are explained in the embed code help page, and the default embed code works well for most projects.

Copy the embed code and add it to the <head> tag in your website.

Embed code and CSS for your web project.

Click Done to close the web project window and continue browsing.  To add more fonts to your project, click the </> button on another font family, then choose your project name from the menu (instead of “Create a new project”).

Customize your web project

The web project and all the fonts you’ve added to it will be listed under My Adobe Fonts. Click the Edit Project button to change which font weights and styles are included, remove a web font family from the project entirely, or change the character set, which specifies the project’s language support.  

A web project on the My Adobe Fonts page.

East Asian fonts must be served with dynamic subsetting, while other fonts have language-based subsetting options: Default, All Characters, or a custom language subset. The Language Support & Subsetting help page has more information on the different options.

You can also include any OpenType features in the project by checking the “OpenType Features” box. Checking this box also shows a list of the features available for that particular web font family, such as ligatures, alternate characters, or small capitals.

When you have the project configured the way you want it, click “Save Changes” to save the project. The updates will be available to use on your website within a few minutes.

Apply the fonts in your CSS

The Web Project page lists the CSS font-family name, numerical weight, and font style for each font in the project. Use these font-family names in your CSS to apply the fonts to the text.

CSS rules to apply the web fonts in your website.

Această lucrare este oferită sub licență Atribuire-Necomercial-FărăModificări 3.0 Ne-adaptată Creative Commons  Postările pe Twitter™ şi Facebook nu sunt acoperite de condiţiile de licenţiere Creative Commons.

Prevederi legale   |   Politică de confidențialitate online