User Guide Cancel

Add fonts to your website

  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

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 choose the language support you require from the LANGUAGES AND WRITING SYSTEMS drop-down menu.

Fonts web interface is shown highlighting the language settings
Select languages and writing systems menu to see the menu for language filter for fonts

Add tags or filters to refine the list of fonts. Use our natural language tags to browse fonts that fit the mood of your project, or you can filter by classification (such as serif or sans serif), properties (x-height, width, or weight), or language. 

Adobe Fonts tag browsing

Create a web project

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

an image of fonts Gilbert is showing with the highlighted Add family option

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.

adding fonts families and choosing style and fonts weights from the fonts web

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 Manage Fonts page later, too.

An image of a pop up where fonts are selected for adding it to a new project from fonts web

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 for fonts is showed in the image along with the fonts styles

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

Your web project and all the fonts you’ve added to it will be listed under Manage 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 designate a font-display setting. You can also change the character set in the web project editor, which specifies the project’s language support.  

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

Font Display allows you to specify how web fonts are loaded in the web browser and applied to your website. More information about these options is available in our font-display settings help page.

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.

wp-page

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online