Established a few years ago as a small opensource project, the Google Web Fonts project has grown to become one of the finest collections of free-to-use embedded font faces for use in websites. FontStack makes it much easier to embed gorgeous Google Web Fonts in your pages. It works with most RapidWeaver themes (including all ThemeFlood themes) and gives you access to the complete Google Font Directory from a single stack. That means you have access to over 700 free font faces, optimised, saved and ready for use in your personal or commercial web projects.

Embedded web fonts work reliably across all major web browsers as far back as Internet Explorer 6. They are perfect if you want to break-away from a limited palette of web-safe fonts and improve both the clarity and professionalism of your written content. Text is rendered using the chosen font in your theme, and then switches across to using an embedded type face when ready. In the event that embedded fonts are not supported by the viewing web browser or the Google Fonts Directory in unavailable, then the text will safely fall-back to either a serif or sans-serif font. Unlike 'image text', text with embedded fonts applied can still be seen by search engines and selected or printed easily by end users of your website.

Previously known as the FontGetter stack under Stacks 1.3 and 1.4, this new version has been totally overhauled to remove previous tripping hazards, thus making the setup process easier than before. Even non-code people should feel comfortable using this stack! Embedded fonts are applied to any content dragged and dropped into the FontStack, or you can apply the fonts to other elements in the page using tick options or a custom CSS box. Options are provided to change the font size, letter spacing and line heights - often required when working with embedded font faces. Newer versions of FontStack have introduced support for text direction, script subsets and experimental font effects. You can also control if your embedded fonts are applied exclusively to screen media, print media or both.


Here are some real examples of embedded fonts generated with the FontStack:
Averia Libre: The quick brown fox jumps over the lazy dog
Gorditas: The quick brown fox jumps over the lazy dog
Henny Penny: The quick brown fox jumps over the lazy dog
Londrina Sketch: The quick brown fox jumps over the lazy dog
Comfortaa: The quick brown fox jumps over the lazy dog
Handlee: The quick brown fox jumps over the lazy dog
Oleo Script: The quick brown fox jumps over the lazy dog
Sancreek: The quick brown fox jumps over the lazy dog
Poiret One: The quick brown fox jumps over the lazy dog
Ruge Boogie: The quick brown fox jumps over the lazy dog
Ruge Boogie: The quick brown fox jumps over the lazy dog
Fredericka the Great: The quick brown fox jumps over the lazy dog
Ubuntu Condensed: The quick brown fox jumps over the lazy dog
Magra: The quick brown fox jumps over the lazy dog
Podkova: The quick brown fox jumps over the lazy dog


Follow these instructions for getting FontStack working in your webpage:
  1. Once installed into Stacks and RapidWeaver, open your Stacks Library and drag-and-drop a copy of FontStack into your webpage
  2. Drag and drop a styled text, HTML code or Markdown stack into the area marked Drag stacks here within FontStack
  3. Go to the Google Web Fonts website, browse the available font faces and make a note of the font you wish to use in FontStack
  4. In the FontStack settings type the name of the font in the Font Name box (exactly as it appears on the Google Web Fonts website); so include spaces and uppercase lettering where appropriate. After typing the font name, hit the return button to lock the name into the stack
  5. Customise any of the other settings in the FontStack settings sidebar; like subsets, italics, text direction, font size, letter spacing, line height and text colour
  6. Preview your page in RapidWeaver to see the embedded font face applied to your text. Publish when done.

As well as applying embedded font faces to text nested inside FontStack, you can also use the 'apply to' checkboxes to target elements within your webpage with embedded font faces. The Apply To Other option in the FontStack settings lets you define a comma-separated string of other element selector names like this:

#siteTitle h1, .footnotes, #content h3, #thumbnailGrid, .leaderBox,

This is a useful feature if you want to target specific elements in your page with Google Web Fonts. You can use web inspector to get the names of different page elements or ask your theme developer.

Font effects

FontStack now has support for about 25 different font effects. This will apply special effects to your text lettering. Please note that this option is highly experimental and mostly just for fun. Most of the effects only work in Chrome or Safari; a few work in Firefox too but support for other web browsers is almost non-existent at the present time. So you should only use font effects for non-critical tasks. You'll get the best results applying font effects to large, heavy font faces (like Open Sans set to 800 weight).

What's the cost?

Given that the Google Web Fonts service is free for both personal and commercial use, the same ethos is extended to this stack also. So it is free to download and use in as many projects as you want. The stack makes use of a small jQuery-powered font loader script, coded by myself exclusively for RapidWeaver. As ever, donations are welcome (especially if you need the attributions removed from the source code).

What fonts are supported?

Currently the Google Font Directory hosts over 700 professional typefaces, developed by leading designers from all around the world. There are many serif, sans-serif, cursive and monospace fonts to choose from - some of which are available with the option of italics and in different weights or subsets. As new fonts are added to the Google Font Directory, these automatically become available for you to use via FontStack.

The font I've opted to use doesn't show, what's wrong?

Sometimes RapidWeaver preview cannot display embedded font faces (this is a long-standing bug) so test the page in a normal web browser. If the font is still not shown, then carefully check your settings. In particular, check that you have spelt the font name correctly (some fonts have weird names) and check carefully that the font weight or style you are requesting is actually supported. Some fonts lack certain weight, subset or style variations, which could result in no font being loaded. Your computer also needs to be connected to the internet, in order to access the servers where the fonts are stored.

FontStack can be safely used in websites encrypted with an SSL (https) server certificate.

Please note, your use of the Google Web Fonts service is subject to acceptance of Google APIs Terms of Service:


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Renren 人人网
Weibo 微博
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!
We use cookies to give you the best possible experience on our website. If you continue without changing settings, we'll assume that you are happy to receive all cookies.