It's generally a good idea to keep your eye on API documentation sites, since most companies tend to add beta features to the docs, even if not officially announced.
Google's Fonts service allows developers to use custom fonts on the Web, even if the user accessing his site doesn't have it installed on his computer.
The service provides three ways of embedding the fonts, as a CSS file in your HTML, as an @import rule in your CSS, or as a JS script tag. Google did its due diligence and made adding a Google-hosted font to any page a child's play for any developer, regardless of skill level.
But there are also other types of developers, like the performance obsessive, the typography guru, or the Sunday-afternoon bored programmer that sometimes goes stumbling through Google's Fonts official documentation site and finds out that the service is capable of much more than delivering fonts.
There are two beta features available with Google Fonts since 2013 which developers can use right now but have managed to remain unused and unknown.
Optimizing font requests by cutting down the font size
For all three above-mentioned ways of embedding fonts, the developer relies on calling on a Google URL. The standard form of this URL is:
< link href='http://fonts.googleapis.com/css?family=FONT+NAME' rel='stylesheet' type='text/css'>
###### Method 2
@import url(http://fonts.googleapis.com/css?family=FONT+NAME);
###### Method 3
< script type="text/javascript">
WebFontConfig = {
google: { families: [ 'FONT+NAME:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();< /script>
The result is a smaller Web font file, which loads faster and is ideal when used for logos, headers, or a piece of repetitive text.
UTF-8 characters are supported as well, but the glyphs have to be properly encoded in the URL. To help you with this, a link encoding tool can be downloaded via Softpedia's Webscripts section.
Basic font effects are also supported
This feature truly deserves its beta status since all the effects work correctly only on Webkit, and disparagingly on other browsers.
The URL parameter to use for this is "effect" and multiple effects can be combined together by using the pipe character ( | ). An example would look like this: