How to Use Eye Catching Fonts from Google’s Library
Once designers were limited to using system fonts in web design, which spawned a trend of creating text-based images and graphics. This technique may have made websites look better, but it introduced other problems. Webpages loaded slower and there was zero SEO value in using graphical headings. Along came changes to browsing that allowed font embedding, but this too was a cumbersome and inconsistent method of getting around Arial and Comic Sans.
Today, support for cloud fonts is almost a standard, to the joy of designers everywhere. While premium services such as Typotheque and Typekit let you take advantage of a huge selection of fonts, they are costly and not always practical. Google’s solution with Version 2 of their free online font library has been to provide a high quality and dependable service for embedding fonts. Here are a few ways you can get the most out of using this fantastic resource. (updated from designzzz.com)
Google Web Fonts
Find the perfect font
Allow your website content to drive your choice of font and choose appropriate styles, which suggest the qualities you want your design to communicate. Enter preview text into the font finder interface, and then proceed to fine-tune your search by selecting filters and setting attributes using the handy sliders in the left sidebar. If you have a hard time getting results, reduce the specifications by collapsing one of the attributes such as the “width” option.
Choose the Right Style
Each font in the Google library has several different styles associated with it. If you plan to use the font as a heading, a heavier weight may grant a more powerful effect. Many fonts also include a bold or italic version that should be used in favor of the default typeface. These various styles are hidden in the default preview list, so you will need to click the “show all styles” link in the bottom right corner of the font’s preview box to see what it has to offer. Clicking “hide all styles” will collapse the preview.
Choose Harmonic Combinations
Limit yourself to a small number of typefaces when building your font combinations – three or less should do. Choose fonts that share similar attributes or consider using different weights or styles of the same font.However, go for a bit of contrast; if your fonts are too similar with only a small variation, it can make your typography look confused. The goal is to highlight a distinct style.
Some Excellent combinations put together by designer Josh Johnson are:
- Lobster & Cabin
- Allerta & Crimson
- Arvo & PT Sans
- Corbin & Nobile
- Ubuntu & Vollkorn
Test Drive
Once you have found the perfect font combination, selected your styles, and added them to your collection, clicking the “Review” button will bring you into the Test Drive interface where you can view your font selections in action and make any necessary adjustments.
Use one Header Link for Multiple Fonts and Styles
When you add fonts to your collection, a blue bar will appear at the bottom of the screen with a big “Use” button. Select the styles you wish to include and note the page load meter on the right side. The more styles and fonts you select, the heavier the page load will be, and including individual fonts and font styles will make the load even worse. With version 2 of Google Fonts, the code snippet generated for you will combine multiple fonts and selected styles into one stylesheet for you, which is preferable to linking each one-by-one.
To understand how this method works, each font is separated by a pipe. Specific styles are appended to the font name by a colon and separated using commas. Spaces in the font names must be replaced with a plus.
Example: http://fonts.googleapis.com/css?family=Gentium+Book+Basic:700,700italic|Ubuntu:400,700italic
Always place your link code before any “<script>” tags in your head to allow Internet Explorer to detect them properly. As an alternative, you can opt to use @import in your CSS document instead:
/* Google Fonts Import -------------------------- */ @import url(http://fonts.googleapis.com/css?family=Droid+Sans: regular,bold|Droid+Sarif:regular,italic,bold,bolditalic&subset=latin);
Add a Transparent Shadow for Text Smoothing
A common complaint with embedded fonts viewed in Windows is the jagged edges that plague some font styles. This is a serious problem for designs that use extremely light or thin fonts, where jagged edges completely ruin the font’s elegance or readability. Thankfully, there is a solution in the CSS text:shadow property. By setting a 1pixel transparency, browsers that support this rule will display the text with a light anti-aliasing effect. Add the property to any class where one of your Google fonts is specified, or use it in your universal declarations to apply it to the whole site.
text-shadow: 0 0 1px transparent;
Google Fonts for WordPress
If you are like thousands of designers, you probably use WordPress for your own portfolio or as a platform for client sites. The “WP Google Fonts” plugin uses the Google fonts API to provide a slick interface for selecting up to 6 fonts and associating them with specific elements. There is a custom CSS box for assigning fonts to special classes as well. This is an excellent worry-freealternative to embedding fonts or font options directly into the theme; frequent updates to the plugin ensure changes to the Google API will not affect your website.
+++Updated from designzzz.com
MAXSTUDIOTECH 
