Google Fonts tricks to narrow down font families to a few characters, and for adding special effects to your texts

Jun 4, 2015 14:05 GMT  ·  By

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:

code
###### Method 1
< 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>
This URL supports extra parameters, and one of them is "text":
code
http://fonts.googleapis.com/css?family=FONT+NAME&text=Softpedia
This tells the Google Fonts service to package a special font that holds only the glyphs (letters, characters): "S," "o," "f," "t," "p," "e," "d," "I," and "a."

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:

code
http://fonts.googleapis.com/css?family=FONT+NAME&effect=scuffed-steel|brick-sign
A list of all the supported effects can be seen below, or consulted on the official Google Fonts API page.
The full list of effects supported by Google Fonts
The full list of effects supported by Google Fonts