Note: Fontamental is a completely free stack to download and use with ThemeFlood RapidWeaver themes. Simply go to the ThemeFlood Stacks page and download your free copy there. Fontamental works with both free and paid ThemeFlood themes. If you want to use Fontamental with themes from another company, you will need to test the demo version and buy the 'Stacks4Stacks' copy from this page.

Fontamental is like FontStack, with the exception that it has zero dependencies on Google servers for hosting your fonts. Instead with Fontamental, you link to WOFF / WOFF2 font files you upload to your hosting server via FTP. This eliminates dependencies on outside services; making for a faster, reliable and more privacy conscious website. To help keep things simple, Fontamental is pure HTML and CSS.

Fontamental is very-much an expert-grade level stack for handling embedded web fonts in RapidWeaver websites. It assumes you already have some preliminary knowledge of working with typography in webpages and familiarisation of basic font terminology. If you are very new to working with fonts in webpages, then the free FontStack is likely to be an easier footing for you to begin learning with.

Example

This example of Fontamental starts with a free Shady stack, to give the boxy / shadow effect. We downloaded the free Caveat font face from Google Fonts and uploaded this WOFF2 font file to our hosting server. Then within the Fontamental stack, we used a regular 'Text' stack for the creative writing and a subtle background image displayed:
 
A brook meandered leisurely through the fertile meadows at a drowsy pace. Shimming eddies gently combed through lush reeds and lightly caressed prominent irises. Shingle shone from below the glass-like waters, with an intensity of gold. Majestic poplar trees whispered a soothing hush in the sultry summer breeze. The pure tranquility was only occasionally broken by the sharp shrill of a moorhen and distant peal of church bells from a hill afar. For Emma lying in the dappled coolness of the fescue, this was her paradise, where time had no meaning.
 

Setup

Fontamental is a flexible stack element and can be configured in one of many different ways. These quick setup instructions explain the process of obtaining a font file you can use with Fontamental, for an embedded font face.
  1. Once installed into Stacks and RapidWeaver, open your Stacks Library.
  2. Search for 'Fontamental'. Drag and drop a copy of the stack into your page.
  3. Set the Target setting to Text Within Fontamental (to apply your font exclusively to text put inside Fontamental).
  4. Change the Font Family setting to Embedded (for use of a speciality 'embedded' font face).
  5. If required, change the Fall Back setting to an alternative font (this is the standard font face used if the web browser does not support embedded fonts).
  6. Enter the name of the font face you want to use, as it appears on the website or font foundry you intend to download the font from.
  7. Go to a website like https://fonts.google.com to choose a font face to use. Click the options to select the font face you want to use. If you need to use extra sub-sets, choose those too. When you have selected a font face to use, you will typically see a button to download the font face as a .zip package.
  8. If the downloaded font arrives to your computer in .ttf format (denoted by its file extension) we strongly recommend using a font file converter (like this webfont generator tool) to get a .woff or .woff2 version of the font face generated. WOFF families of fonts offer the broadest web browser compatibility and smallest possible file size, so are much better to use for websites.
  9. Upload the generated WOFF font file to your web server via FTP.
  10. Within the Fontamental settings, scroll-down to the sub-set options and link to your font face.
  11. If there are any other CSS styling options you wish to change for your font (like alignment, decoration, transform, direction, style, weight, indentation, spacing, line height, size, colour or shadow) change these too.
  12. Preview your page to see the completed result. Publish when done.

As always, hovering your mouse cursor over settings will display a small informational tooltip about what each setting does and any important notes to read. Multiple Fontamental stacks may be safely used on the same page. This is useful if you wish to target different parts of the webpage with two or more font faces.

Compatibility

Fontamental is compatible with all newer web browsers and most RapidWeaver themes. You can use the Can I Use website to determine what web browsers your WOFF / WOFF2 font faces will display on. A free demo version of Fontamental is available for you to download and experiment with to fully test the stack on your computer. Compatibility with touch devices (like mobile and tablet) is also supported.

Font file storage

Although it is possible to make Fontamental use fonts you attach as resources in RapidWeaver, we advise against doing this. Depending on your website structure and configuration, the links to font files added as resources may break. Instead we would recommend you use your preferred FTP software or file manager to upload the font files directly to a directory on your hosting server. This process will make linking to your font files far easier. Plus if you use an absolute path (e.g. https://example.com/fonts/fancy_font.woff2) you may find most web browsers cache the font and load it much faster on subsequent page views or future website visits.

Warning: Some web browsers (like Firefox) block the loading of fonts from another web server, due to their security and privacy settings. The easiest way to avoid potential problems (without modifying your .htaccess file) is to only link-to and use font files hosted on the same server / domain that your actual website is published at. You can create a new directory on your website and store the font files at that location.

Font subsets

If you have worked with typography before, you should know that fonts come in a variety of different subsets. Latin is often most common to use, however you may need to load-in a 'Latin Extended' subset, for using other characters. Likewise languages like Greek and Thai have their own subsets, so it would be advisable to use these instead. It is for this reason that Fontamental has numerous different link options, for choosing the desired font subset you want to load-in. Each time one of these subsets is activated with a link, Fontamental will write into the page source code what the subset is; therefore assisting web browsers with loading the correct font subsets and displaying fonts correctly.

Font licensing

Fontamental is a very powerful stack and allows you to make almost any font face embedded in your website! However you need to be aware that embedded fonts work on the basis of the font file downloading to the end-users computer (like an image) and being used by the web browser software to render text in that particular font. With this in mind, careful consideration needs to be taken towards copyright and licensing. Many fonts (even the ones that came installed on your computer) are not permitted to be reused in websites. You should restrict your use of embedded font faces to ones which are specifically 'SIL' licensed or covered by other similar license agreements permitting their use in websites.