Google Fonts: A Library Of Open Source Fonts


Google Fonts: A Library of Open Source Fonts Google Fonts: A Library of Open Source Fonts

Google Fonts is a directory of open source fonts that are FREE and available for graphic designers and website developers. This is one of my most used design resources and after this quick introduction, I think it will become one of yours as well.

800+ Open Source Fonts At Your Fingertips!

The library currently includes over 800 fonts in a variety of different weights, styles, and type classifications. There a great selection to get your creative juices flowing. And, best of all, they solved one of the most annoying issues with using third-party materials: licensing!

Nothing throws a wet blanket on a creative fire like having to figure out if your chosen font will legally work for the current (and future) scope of your project. Each font available through Google Fonts is released under either the SIL Open Font License or the Apache License. As a result, you can use them on any website—even if it is a commercial one. This is a huge timesaver for those of us who hate to read legalese.

You can also use these fonts on modern mobile operating systems (e.g. Android, iOS). This is fantastic way to make your mobile website or application stand out with beautiful typography and be unique.

Do you design fonts? Great news: Google Fonts isn’t a closed project. If you are a font designer, you can submit a request to Google where you can apply to have your own open source fonts included in their system. This is an excellent way to share your skills, build a professional reputation, and get more notoriety in the font design industry.

So how does Google Fonts work?

Google Fonts: Entire Library

The first thing you need to do is visit their website at: You’ll be browsing their entire interactive library of open source fonts as soon as it loads. From here, you can choose to scroll through all fonts in their collection on the left side of your screen or use the sorting and filter options provided on the right. These options are especially useful if you already know what type of style you want for your particular design.

Search for the perfect font.

Google Fonts: Filter OptionsAt the top, you can search for a font by name. You can check or uncheck different type classification categories and sort all of your results by what’s trending, what’s popular, by date, or alphabetically. As a result, the filtering system updates the results every time you make a change.

Keep in mind that many of the fonts you see have been specifically designed with a Latin character set in mind. If your project requires a non-Latin character set, the developers at Google provided a great feature which lets you search for specific language character sets.

Below those options, there are several open check boxes with sliders. If the font you’re looking for needs to support a variety of different styles (e.g. bold, bold italic, semi-bold, etc.) you can check the box under Number of Styles and use the slider next to it to denote how many styles the fonts shown should to support.

In order to sort by visual weight, you can select the Thickness option. If you adjust the slider to the left or right, you will only see fonts that use very thin or very thick line weights.

The Slant sliders will allow you see fonts with little-to-no (or a lot) of visual slant. Generally speaking, monospace fonts will appear at the leftmost side of the slider, serif and sans serif fonts will appear in the middle, and handwriting and certain display fonts will appear on the right side.

Finally, the Width option will allow you to preview fonts that have a particular letter width. This ranges from very skinny letters to very chunky letters on the slider scale.

If you already have an idea of what you want to use, adjusting these filter settings can save you a lot of time. You’ll be able to sort out which fonts will work with your particular design aesthetic in no time.

Customize the examples.

Google Fonts: Font Example with Custom TextBy default, each font will be mocked up using a small selection of short sentences. Because of this, you get an immediate idea of the typeface’s style and how it handles important factors like kerning. Want to preview of your own content? All you need to do is click on the example content itself and start typing!

If you hover your mouse over any of these samples, more options will appear. These options allow you to adjust the sample’s weight, style, and type of content. Changes are on a case-by-case basis, but you can always choose Apply to All Fonts to apply your customizations to all of the samples.

Get more information.

Google Font: Bigelow Font Detail ScreenClicking on the See Specimen option will take you a detailed description of the font. Here you can look at the entire character set, available styles, and more information about the designer. The lower half displays a selection of other complementary open source fonts in the library. These pairings are curated by looking at the selection history of your fellows designers. As a result, if you looking to customize both headers and body content, the popular pairings section is very can be useful.

Put those open source fonts to work!

When you’ve found the fonts you want to work with, all you need to do is click on the Add (+) Icon to the right of the font name. This will add your choice to a temporary collection box that appears at the bottom of your screen. Inside this collection window, you’ll be given everything thing you need to put your selected fonts to work.

Google Fonts: Selected Collection Screen

As shown above, Google provides you with all the code you need to implement your collection right away. The correct embed code is provided for you automatically and all you need to do is copy and paste it into a relevant HTML file or CSS file. Additionally, they give you a preview of how long these fonts will take to load from their server—which I’ll talk more about in a minute.

So let’s say you don’t want to jump right into using these fonts on a website. All you need to do is click on the Download Icon at the top right of this window. When you choose the Download option, a packaged archive of your font collection will begin to download to your computer. This archive contains the chosen fonts each in their own directory. This is great if you’re obsessive about file organization like me. Once you have the font on your computer, you can install them and start mocking up your designs in your favorite programs like Adobe Photoshop.

Google cares about load time and so should you.

It is possible to download these open source fonts, upload them to your website, and hook up your code. Serving fonts locally can get messy and is not recommended. This is why Google gives you specific snippets for you to copy and paste. Not only are you capitalizing on Google’s superfast CDN (Content Delivery Network), but you are ensuring that you get the most up to date version as well. This means bugs get automatically fixed, your website’s server is working less, and your overall page load time is reduced.

Speaking of page load time… the biggest problem with Google Fonts is its user. Let’s be honest: you want to use a least a half dozen of the fonts you found in their library, don’t you? You have the ability to mix and match typefaces (as well as their corresponding font weights and styles) to your heart’s content. It’s important to realize that each additional attribute  you select will increase the file size of your font set.

This is why Google has provided you with an example of the Page Load speed. However, it’s up to you to be responsible. Not only will this make your projects look funky, when you load them on the web, it can cause your sites to experience some major slow downs. With this is mind, don’t abuse the system.

Select only what you absolutely need to get the job done.

Remember that collection window? One of the options Google provides is the ability to customize precisely what is getting loaded in your project. Inside the Customize tab, you can enable or disable any font, style, or attribute within the chosen families. Every one of these options is going to affect the load time on your website. If you pare your selection down to only what you absolutely need, you’ll spare visitors precious seconds of load time. This could be all the different between a sale or bounce.

That’s it! Start using it.

In short, whether you are a graphic designer, website designer, or just a hobbyist—this is a great resource when you need access to awesome open source fonts. All you need to do is visit the Google Fonts website and you’ll find yourself browsing their library in seconds. You don’t pay anything. As a matter of fact, you don’t even need an account. How many resource sites can say that? There are no excuses.

Click here to take your typography to the next level!
Start using Google Fonts now.

You may also like