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