And unlike other Google software like Gmail and Adsense, there is no need for a Missing Manual.
[animate_animate animation=”twisterInDown” duration=”3″ activation=”click” delay=””]Yippee for Google Fonts! Click me to see my excitement![/animate_animate]
So let us take a look at what Google Fonts provides to web designers and developers beyond 708 free top designer fonts publicly accessible through at least 4 robust access mechanisms. The first thing Google has done is to make those 708 fonts easily searched and filtered in a number of ways:
Okay, my preference is for the Poster display; but WordPress colleagues tend to go with Paragraph. But the real help to selecting the fonts you want is in the lefthand sidebar Filters:
The filters are vital in trimming down over 700 Google font choices.
- Categories – allows filtering for Serif, SanSerif, Display, Handwriting, and Monospace fonts individually or any grouping.
- Thickness – has a slider between thin and thick and the list of qualifying fonts updates instantly.
- Slant – has a slider between straight and slanted which instantly updates the list
- Width – has a slider between narrow and wide and I must admit I could barely figure what it was doing
- Script – gives a remarkable broad list of scripts beyond European Latin. including Hebrew, Cyrillic, Thai, etc
Choosing a Script other than Latin reduces the number of fonts available dramatically. For example Arabic has 3, Cyrillic has 32, and Greek has 1. But do be careful choosing between Latin and Latin Extended because many special characters for European languages are either in one or the other. Meanwhile, combining Font category with thickness meets many of my needs for filtering.But what is most helpful are the four different font views provided by Google Fonts. The silder below shows all 4 choices:
[cycloneslider id=”gfontdisplay”]
Notice each of these views supports 3 immediate font actions.The first button triggers Quick use options which allows one to immediately install a Google-font on a website with all the step carefully described:
First users can select some added font variants usually weight and italic style but spacing and kerning also in a few fonts.Then the character set can be chosen – most are Latin but as noted Cyrillic, Greek, and more two dozen language sets are available. Then come the important information for importing or using a Google font. There are 3 ways to import the Google fonts into your website app. The simplest is a LINK HTML statement which you insert directly into the HEAD section of your web page. Next the is a @Import command which allows users to put font selection at the very top of their .CSS file. Note no other CSS statement including CSS comment can precede the @import command. Finally Google offers some examples of how to use their fonts in your HTML code with JavaScript.. So Google make usage of their fonts straight forward and easy to do.Thus, for single Google font usage users are good to go. But who wants to use just one Google Font?
Collections or Groups of Google Fonts
Google provides collections for choosing more than one Google font.Hence the blue button used throughout – Add to Collection
Then for the collection [which is all of the fonts you have chosen in a session] Google Fonts provides three actions and the buttons for these are in lower right corner of the browse page The font actions are:
Choose – continue choosing as many fonts as you want to use on your website – typically 5-10.
Review – this is the gem of Google Fonts it allows you to see the fonts in so many useful ways.
Use – describes in detail 3 ways to load the chosen Google Fonts onto your website.
So the first task is to choose from the over 700 Google Fonts available. Fortunately as noted, Google provides a number of filters which help users to focus on the fonts they need.Personally the category filter with its choice of Serif, San-Serif, Display, Handwriting, and Monospace is most useful to get Horseshoes close. Then either a Thickness or Width setting gets very close to the font desired
In this case a font for testimonials is needed so it is easy to switch the display tab to Paragraph. But use of the Poster tab will help spot the 1 or 2 of the best from many font choices available.
So once you have narrowed the font search to the 4-8 fonts you prefer the Review action tab provides a wealth of options for refining and making the final choices for the fonts you want to use. Here in tab order of some are the very helpful Review Options:
This useful font information because the variant style often clinches the case for a font. Note the Font panels can be dragged and dropped into different order which is also helpful in reviewing how the fonts work together.
Again the panels can be dragged and dropped in any order and the Font Popup icon is available too. Changing the font-size helps to reveal good matches among the fonts.
Tab 2 content
In the lefthand sidebar, users can change the font or font-style for the Page Heading, Into Text, the Sub-heading, the Body-copy, and the Sidebar-copy. This really allows the font designer to see the effectiveness and interaction among the fonts. And when you select any of the font usage settings, Test Drive expands in the left sidebar withe piece de resistance for Font Testing. Fontographers can change the Font-Family, Font-Style, Font-size, Letter-spacing, Word-Spacing, Line-Height, Text-transform, and Text Decoration. literally the works for refing your font design. Seriously brilliant.
Character set shows all the characters in each selected font. A font specialist friend constantly chastises me for not verifying all the cahracters in a font – no more. Its easy to spot any gaps or unacceptable character rendering with Character Set view.
Spotting potential line height problems or anomalous rnederings of characters is easy with the Compare Tab.
This is a winning touch to Google Fonts because it allows users to understand the design thinking that went into a font and its variants.
Typecast create a web page environ where your selected Google Fonts can be used in designing a web page. Users of the free account have the Google fonts plus 600 other fonts to work with in the Typecast editor which provides superb font help. The design canvas can start with a blank slate and its easy to add containers for type. Because Typecast will generate all the HTML and CSS needed to display your design, Typecast is perfect for use with SPA JavaScript Frameworks like Bootstrap, Foundation Zurb, InK, and W3CSS. For $10/month users can get 12,000 added fonts for 3 users plus there are other plans available.In sum to get the full value from Google Fonts, time spent using the Review features pays off tremendously.
How to Use Google Fonts
If there is one valid complaint about Google apps, it is that the documentation on how to use Google apps can be “challenging” [Think Gmail or Google Docs] . Not so in the case of using Google Fonts – all the bases are covered in a simple 4 step process:
First two steps are to choose the styles within each font you want to use and what character set. The Review action should have whittled down the Google Fonts to be used. Now decide which extra styles you will want to utilize. The choice of character set depends on what languages you need to display. Be careful if you choose a non-Latin character set because your choice of fonts is much more limited[see here for details]. Also Latin extended supports a different set of European language special characters than the simple Latin character set.
The next two steps on Google Font Usage describe how to access your chosen Google Fonts and how to use them in your HTML and CSS:
Note that Google describes 3 methods of accessing the chosen Google Fonts. The HTML <link…> method is the fastest and easiest. The @import method works for shops that control font usage from a central .CSS file. And the JavaScript code allows Web developers to invoke font-family changes on the fly.
The 4th Usage steps shows examples of using the loaded Google Fonts in CSS files and inline CSS styles. Note the use of single quotes around the Google font-names. There are some advanced uses which are described here.
Summary
The free usage of Google Fonts has been made very approachable by the Google Font website. And I have covered only some of the features. For example, I have highlighted the Font Popout icon but have not explained what it does. Well the Popoout provide very specific data on each font:
Here is some of the statistics about the use of the Merriweather Font in the last week – 642 billion font views. And you will see the same heavy use for all of the Google Fonts. With this level of use, isn’t time you tried the free Google Fonts on your website?