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.
ExamplesHere 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.
SetupFollow these instructions for getting FontStack working in your webpage:
- Once installed into Stacks and RapidWeaver, open your Stacks Library and drag-and-drop a copy of FontStack into your webpage
- Drag and drop a styled text, HTML code or Markdown stack into the area marked Drag stacks here within FontStack
- 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
- 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
- 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
- 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:
Remaining GDPR / DSGVO compliantThe 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.