6-Step Guide to Using Adobe Fonts on Your Next Web Project 6-Step Guide to Using Adobe Fonts on Your Next Web Project

6-Step Guide to Using Adobe Fonts on Your Next Web Project

Design, Experience Design, UX & UI

In modern web projects, there are more options than ever when it comes to font selection. Brands can craft any visual language they want using virtually any font pairing. Web-friendly fonts are accessible from many sources and can be loaded into a site in more ways than ever before. From the perspective of a Creative Director and UX professional, I am going to introduce you to Adobe Fonts and show you just how easy it is to add fonts to your web project through this service.

What is Adobe Fonts?

Adobe offers a rather large library of professional-grade fonts for designers and creatives as part of the Adobe Creative Cloud subscription service. This applies to all Creative Cloud subscription levels, including single-application subscriptions, like InCopy. These fonts aren’t designed just for desktop applications – they can also be utilized in web projects ranging from a small, personal website to a large, enterprise-level ecommerce website.

You may be asking, how do I get these fonts onto my website? In the following sections, I will walk through the process from start to finish. Let’s get started!

Fun Fact: Adobe Fonts was originally branded as Typekit and was founded in 2009 by the creators of Google Analytics. Typekit was rebranded as Adobe Fonts in 2008.

Step 1: Browse for Fonts at Fonts.adobe.com

Assuming you already have an Adobe CC subscription, the first step is to head over to fonts.adobe.com. You will be presented with a lovely landing page chock-full of resources to educate you about the service. The site even curates content, such as collections or “packs”, which are inspired by different industries or designers. Let’s get started by searching for some fonts.

ADOBE FONTS HOME PAGE

Step 2: Select the Fonts You Would Like to Use

Looking at the search results, let’s go with the first one: Bely font from TypeTogether. Now that we’ve narrowed down a font family, there are a few options to choose from. We can click “View Family” to see all of the fonts available styles on a separate page, or you can add fonts to a web project directly from within the search results. Let’s go ahead and click “View Family” for Bely.

ADOBE FONTS SEARCH RESULTS

Step 3: Add Fonts to Your Project

From the family detail page, we can add individual font styles using the code bracket icon in the style card, or select multiple styles using the code bracket above the results labeled “Add to Web Project”. Let’s click the “Multi-Select” option.

 FONT FAMILY DETAIL PAGE

Once clicked, you will be presented with a modal to select your font styles. For my project, I am going to select the “Display” style and “Italic” style. Don’t worry if you aren’t sure of all the styles you need, as this can be edited later.

Step 4: Create a Web Project

With your styles selected, you will need to click the dropdown and create a new project. For this example, I’ve named mine “My Web Project”.

CREATE WEB PROJECT MODAL

With your font styles selected and the project created, you will be presented with an option to add the code to your website or to edit the project. Since we are still working on our project, we will edit our project so we can make sure our fonts are exactly the way we want them to be. 

EDIT PROJECT MODAL

Step 5: Edit Your Project

The Edit Project screen allows us to make changes to our selected styles. If we decide to add more styles, then we can simply select or deselect the associated checkboxes. Beyond font styles, we can control advanced settings for how the fonts should be presented. The “Character Set” panel lets us choose what characters and features should be included in our web project for each font family. This is helpful if we need advanced OpenType features for detailed styling in CSS. 

If we know who will be viewing our website, we can maximize performance by including only subsets of characters. For example, if our site is only viewed in the United States, it may make sense to deselect the Cyrillic character sets. This reduces font load times as we will only be using a portion of the font family.

EDIT WEB PROJECT

What if we need multiple font families in our project? Adobe Font Projects can handle any combination of font families and styles. In this example, we have three different families: display serif, text serif, and a sans serif font family. To add another family to our project, we simply need to repeat steps one through four.

WEB PROJECT OVERVIEW

Step 6: Add Fonts to Your Site

Now that all of our fonts and styles are in our project, it is time to add everything to our website. Adobe Fonts serves up the files from their servers, so all we need to do is copy the code snippet and drop it into the head of our website. If you are intending to use these fonts in an HTML email or prefer adding the fonts via CSS, there is an @import alternative that works just as well.

After you have the fonts successfully added to your project, you simply need to reference the font’s name and style as you would with any other fonts. If you are unsure of how to reference the names and styles, simply go to the URL in the code snippet to view the CSS.

 ADOBE FONT PACKAGE CSS

Golly This is Wonderful, but What About Web Licensing and Hosting?

As of now, all of the fonts offered by this Adobe service are available to use on both personal and commercial web projects. What’s better is that there are no pageview limits, which means there’s no need to worry about hitting licensing limits when using fonts on heavily visited sites.

As far as hosting goes, fonts are served up by Adobe’s servers, which means you will never have the font files directly added to your web project. This may be a deal-breaker in some cases, but if you can make peace with not serving up your own files, Adobe fonts is an excellent service to consider.

Trust the Experience and Design Experts at CQL

I hope this 6-step guide on adding Adobe fonts to your web project was helpful. Should you have any questions or inquiries, our Experience Design team would love for you to get in touch! We have a team of skilled and dedicated designers ready to help you and your business enhance your website’s user experience. 

Stay Informed

Stay up to date on the latest in technology, strategy and design.