Using Typekit and other Web Fonts

Adobe Typekit web fonts are now available in the Adobe Muse Add/Remove font menu.

You can try a limited selection of fonts from the Typekit library with any level of Creative Cloud plan, and if you’ve subscribed to a paid plan, you’ll have access to the full library with thousands of fonts. For more information on subsciption plans for Typekit, see Web Font Hosting Plans from Typekit.

Unlike self-hosted web fonts, Typekit hosts the fonts that you decide to use on your website. This means that if you select fonts from the Typekit library and then publish your site in Adobe Muse, Typekit will automatically host those fonts and connect your Typekit account to your website.

Web fonts enable you to choose from hundreds of fonts in a large online library hosted by Typekit.com. The library of web fonts in Adobe Muse is included with your Adobe Muse subscription. You don't need to sign up or purchase a Typekit account to access the fonts and start using them in your web designs.

Note: If you have a Typekit account, you'll notice that the set of web fonts currently available in Adobe Muse is different than the set you access when visiting typekit.com. The web fonts provided in Adobe Muse are free, restriction-less, and do not require a Typekit account. The web fonts offered with a Typekit account are metered and access-controlled. Future versions of Adobe Muse will enable you to access your library of Typekit fonts from within the Adobe Muse workspace, but this feature is not yet available.

The benefits of using web fonts are:

• You can choose very unique and stylized fonts to style text content, even though you do not have the fonts installed on your computer.
• Web fonts that you apply to text are linked to pages automatically when you publish, export, or preview the site.
• The fonts are hosted by Typekit.com. When visitors view the live site in a browser, the font is downloaded behind the scenes to display the text.

In the rare event that the Typekit servers are unable to load the font you've applied dynamically as the pages load, the text content will still display—using a default backup font. This scenario is very unlikely, but it is good to note that the text content will still be legible to visitors in any case and the site won't display an error message.

Exercise caution when adding web fonts to your design. If you add too many web fonts, visitors will experience longer overall download times, which may make sites much slower—impacting the overall user experience. With this in mind, limit your designs to applying 1-2 font families with 4 styles per family. Because web fonts are remote resources (just like images and video), they must be downloaded into the visitors' browser cache as they view a site's pages.

Another feature is that Adobe Muse tracks all of the web fonts that are used in a site. If you remove a web font that is in use for a .muse file, the web font will remain in the list in the Font menu the next time you open the .muse file. So you can't accidentally remove a web font that the site needs, and you don't have to manually keep track of the fonts you are using as you design pages.

Follow these steps to add a new web font:

A new window appears that displays the web font library.

The Self-Hosted Web Fonts feature allows you to access and use web fonts you may have purchased from third-party providers. Certain web fonts may not be available on each site visitor's computer or device. In such a scenario, depending on the browser's text engine a web-safe font is used instead, which greatly affects the appearance of your website.

Web fonts must be downloaded from a server, such as the one hosted by Adobe Edge Web Fonts (powered by Typekit). Alternatively, it may be preserved on the same web server that hosts your site content. The approach of hosting and rendering web fonts real time, during a site visit is called self-hosting, and fonts obtained in this manner are called Self-Hosted Web Fonts.

The following font types are needed when working with self-hosted web fonts:

The Manage mode displays a list of all self-hosted web fonts with matching desktop font. The newly added fonts bubble up to the top of the list, and so do fonts with missing font files or without a desktop match.

The Manage mode for self-hosted web fonts, allows you to do the following:

Sometimes, Adobe Muse may fail to match a web font with its corresponding desktop font automatically. In this case, you are required to explicitly specify a match for the web font. To specify a match for a web font, do the following:

If Adobe Muse could not locate .eot or .svg files corresponding to a .woff file automatically, you can manually locate them. To locate a missing font file, click the button next to the font. Click Browse and navigate to the location of the missing file. Click OK to add the missing file.

• Provide License Information: Click the button next the font you want to edit, and provide License Information. Click OK to complete.
• Delete Fonts: Select the Font you want to delete, and click OK.
• Filter list of Fonts: Filter the list of fonts by entering some or all the letters of the font label in the Filter text box.

If you have previously added self-hosted web fonts, the Browse mode is automatically activated when you launch the Add Web Fonts dialog. This mode provides thumbnail previews of fonts (grouped by family) and lets you select fonts to add to the Fonts drop-down. (By default, all newly added self-hosted fonts are added to the Fonts drop-down, assuming there are no issues such as missing font files or no matching desktop font.). You can also filter the font families by name or show only selected items.