@Web Font Services

March 16, 2017

Not too long ago, website typography was restricted to a very small subset of fonts that were known to be installed on a user’s system as part of the OS. Fortunately today, those rules no longer apply.

Today, designers can take advantage of hundreds of fonts using a simple technique called embedding.

For the purpose of this post, we’re only going to review what is generally considered the three best web font services.

Google Fonts

Launched in 2010, Google Fonts features over 800 free fonts. Google Fonts has very easy to implement API and requires no account.

Simply select a font family, copy the standard link and reference the font in your stylesheet.

As you browse the various font families, you will notice that many offer quite a few customization options. The more options you select, the slower your page will load. Best practice is to select only the options you know you will use. As you add more selections you will notice the load time changes from green to red which represents slow load times.

Get Started with the Google Fonts API – Google Support

Adobe Typekit

Typekit is both a free and subscription based service. If you have a Creative Cloud subscription, most subscriptions include the Portfolio Plan at no additional fee.

The Free plan includes 940+ web fonts, however you are limited to 2 families per website. If you plan to use Typekit on more than one website, you will need to upgrade to a paid plan, unless you create multiple Adobe user accounts.

Getting fonts from Typekit to your design is a bit more complicated than Google Fonts. 

The first step is select a font and then add it to an existing kit or create a new kit. From within the kit, you define the domain where the font will be used. You can use the same font on more than one domain. 

Once the font has been added to a kit, you can then use the selectors section to apply fonts to HTML, tag, class or id. You also need to select options from the weights and styles menu. 

The final step before publishing is to add the JavaScript call to your HTML.

If your fonts aren’t immediately visible after publishing, try waiting a few minutes.

Often times it can take up to 15 minutes for your Typekit fonts to initially sync. If you make any changes to your kit, remember to republish your kit.

Add Fonts to Your Website – Adobe Support

Font Squirrel 

Font Squirrel offers a huge, mostly free collection of fonts licensed for commercial use. Fonts marked as “Off Site,” link to Font Spring which includes both free and paid options depending upon the font weight and style. 

A unique feature of Font Squirrel is the Webfont Generator that allows you to create a web font from any font you own. Just upload a font, agree to the terms and download your kit. Check the expert option to select the font formats and add your own character subsets.

The biggest difference between Font Squirrel, Google Fonts and Typekit is that Font Squirrel requires you to host the fonts on your own web hosting account, which can lead to performance issues.

Once you have selected a font, select the Webfont Kit tab, select the desired font formats and click the download @font-face kit button.

When using @font-face, browsers won’t render a font until the font has been downloaded. This can create a quick flash of un-styled text, visible to the person viewing the page. The best way to minimize this is to keep the size of your kits as small as possible and by limiting the number of font files used.

Help Installing Fonts – Font Squirrel