Important: Loading web fonts from an external source (like Google) is not compliant with privacy laws. You must either nest instances of FontStack inside MiniCookie (to make the fonts opt-in). Or use Fontamental instead to self-host the font files yourself.

Established some years ago as an opensource project, the Google Web Fonts service has grown to become one of the largest collections of free-to-use embedded font faces for use in websites. FontStack makes it much easier to embed gorgeous Google Web Fonts within your webpages. 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 800 free font faces in 135 languages; 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 seek to further 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 plain 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.

Our FontStack is a lighter alternative to the premium Fontamental stack; which instead uses self-hosted font files, includes subset support and has an extended choice of style and colour settings for your text.

Examples

Here are some real examples of embedded fonts generated with the FontStack. To comply with important privacy laws, the content and fonts only get shown if you've opted into loading third-party content, via the privacy consent popup on this website.



Setup

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 on the RapidWeaver forums for help.

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:
https://developers.google.com/terms/

Remaining GDPR / DSGVO compliant

The fonts you use with this stack are stored on Google servers. EU privacy and data protection laws would normally require that you combine FontStack with our free CookieManager stack. Thereby you would place FontStack inside CookieManager and only allow FontStack to run after the website user has given their consent.

If you are a user of ThemeFlood themes, then please take note that some of our theme designs already include a large choice of self-hosted fonts (typically in excess of at least 125 popular font faces) as part of the built-in 'RWFontKit' plugin. These fonts are ready to choose from in the theme style settings, within the RapidWeaver Page Inspector. Therefore because you host the fonts yourself, you are not obliged to receive user consent or opt-in. Alternatively if you want to host different embedded fonts yourself, then Fontamental is a perfect stack for the job.

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 very welcome.

What fonts are supported?

Currently the Google Font Directory hosts over 800 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 6 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.
 

Contribute

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.