Using Typekit and other Web Fonts

Paieška

Read this article to know how to use Adobe Typekit web fonts, Edge web fonts, and self-hosted web fonts on your web pages.

How to use Typekit Fonts in Adobe Muse

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.

Add Typekit fonts to your site

  1. In Adobe Muse, select File > Add/Remove Web Fonts.

  2. On the Add Web Fonts dialog, the Typekit tab lists all Typekit web fonts available to your Creative Cloud account type.

  3. Browse for the font that best suits your design needs. You can use the following Sort and Filter options to select the font you need.

    • Click the button to sort based on Featured, Newest, and Names options.

    • Click Filter to take advantage of any of the following Filters:
      • Classification: You can filter Typekit fonts based on their classifications, such as Serif, Sans Serif, Script, and so on.
      • Recommended for: Filter fonts based on Typekit's recommendations for paragraph or headings.
      • Properties: Filter based on properties such as weight, width, height, and so on.

  4. Once you find a font that you want to use, simply click it. A checkmark appears indicating the font is selected. You can choose multiple fonts to add at once, if you'd like. The Selected Fonts tab displays all fonts you've selected.

  5. Click OK. The Web Fonts Notification dialog box appears, confirming the new web fonts were added. Select the Don't Show Again option if desired.

    Click OK to close the confirmation message.

    Now when you use the Font Menu to choose the Web Fonts option again, the list of fonts you added are displayed.

Apply Typekit fonts to your text

  1. In Adobe Muse, select the text you want to apply the Typekit font on.

  2. With the text still selected, choose the Typekit font you want to apply from the Font menu.

Use Edge Web Fonts in Adobe Muse

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.

Add Edge Web Fonts to an Adobe Muse project

Follow these steps to add a new web font:

A new window appears that displays the web font library.

  1. Use the Text tool to select some text in a text frame.

  2. Use the Font menu (in the Control panel or in the Text panel) to choose Web Fonts > Add Web Fonts...

    The web font library allows you to access hundreds of fonts that you can apply to your pages.

    You can click the Filters across the top of the page to choose the style of font you are interested in adding. Or use the search field to find a font by name.

  3. Once you find a font that you want to use, simply click it. A checkmark appears indicating the font is selected. You can choose multiple fonts to add at once, if you'd like.

    Click the fonts you want to add; a checkmark indicates that they are selected.

    You can click the single line or multi-line button near the top right side to view the fonts that are best suited for headers or paragraphs.

    View the list of fonts that work well for styling header text.

    If you click the checkmark button to the far right, the window displays the list of fonts that you've selected. If you change your mind and decide not to add a font, just click the font's name again to deselect it.

    The Web Fonts Notification dialog box appears, confirming the new web fonts were added.

  4. When you are finished selecting the fonts you want to add, click OK.

  5. Click OK.

    If desired, check the Don't show again checkbox.

    Click OK to close the confirmation message.

    Now when you use the Font Menu to choose the Web Fonts option again, the list of fonts you added are displayed.

    Choose Add Web Fonts in the Web Fonts section of the Fonts menu.

Add and apply Edge Web fonts

  1. In Adobe Muse, select the text you want to apply the Edge Web Font on.

  2. With the text still selected, select the Edge Web Font you want to apply from the Font menu.

Use Self-hosted Web Fonts in Adobe Muse

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.

Pre-requisites

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

System Fonts

are needed for designing your web page within Adobe Muse. When you purchase a web font, ensure that you download and install properly licensed desktop fonts. Adobe Muse supports the following font formats:

  • True Type Font (.ttf)
  • Open Type Font (.otf)
  • True Type Collections (.ttc)
  • Mac Data Fork Fonts (.dfont)
  • Mac Resource Fork TrueType Suitcases

Web Fonts

are used when rendering your site in the browser. Adobe Muse requires you to obtain the following web font formats in order to render the font across all browsers:

  • Web Open Font Format (.woff)
  • Embedded OpenType (.eot)
  • Scalable Vector Graphics (.svg). This format is needed for older Android devices.

 

Add Self-Hosted Web Fonts

  1. Select File > Add/Remove Web Fonts to bring up the Add Web Fonts dialog.

  2. On the Add Web Fonts dialog, select the Self-Hosted Web Fonts tab.

  3. Browse to and select the folder containing the font or drag the font onto Add Web Fonts dialog. On locating web fonts, Adobe Muse displays a prompt accordingly. If you have added web fonts in the past, click + Add Fonts button to continue.

  4. Adobe Muse searches for web font files within the specified folder, and automatically matches them to their corresponding system font. Affirm that you have properly licensed the web font, and click Continue.

  5. The Manage mode is automatically activated, and the web fonts that have been added are listed.

Managing 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:

Specifying a matching desktop font

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:

  1. Click the  button to bring up a dialog for your font.

  2. Click the Match button, to display a list of the fonts installed on your system.

  3. Select a matching system font by scrolling through the list or filtering by name. Click OK to confirm the match.

Specifying missing font files

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.

Miscellaneous tasks

  • 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.

Browsing Self-Hosted Web Fonts

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. 

„Adobe“ logotipas

Prisijunkite prie savo paskyros

Greitos nuorodos

Peržiūrėkite visus savo planus Tvarkykite savo planus

Legal Notices    |    Online Privacy Policy