CustomFont Stack Tutorial

Custom Font Files

Font Selection

It is very important that you honor the rights and EULAs of the fonts you want to use. Only embed fonts legally eligible for web embedding. There are plenty of web sites you are able to get fonts from, also for free. Here are some examples:

  • http://www.fontsquirrel.com
  • http://www.fonts.com
  • http://www.fontshop.com

Convert the Fonts

In order to have full browser support, the fonts have to be available in 4 different file types (eot, woff, ttf, svg). It is possible to generate these files with the help of the following free tools:

  • http://www.fontsquirrel.com/tools/webfont-generator
  • http://fontprep.com

Integrate the Fonts

The fonts must be integrated into the resources area of your RapidWeaver project. Create a folder with the name fonts (case sensitive) underneath the resources area, and insert the 4 different files (eot, woff, ttf, svg) into it. In order to simplify, make sure no spaces (blanks) or special characters are inside the file name. All 4 files need to have the same name (beside the file type extention). For reference, see the first of the setting pictures. Drag and drop the Stack into your page. As Font Family Name, use the file name (case sensitive), without the file type extention.

Change the font of your title, slogan, footer, and even navigation bar

In order to change the font of title, slogan, footer, and navigation bar, the text of these fields has to be sourounded by span tags with additional font-family settings. This can be done in the Page Inspector or general settings of the project. See the third screenshot in the settings and the demo page for reference.

Stacks Image 326985

Google Fonts

In order to use Google Fonts, select CSS File from Font Location and add there the link to the Google CSS file.

As Example: Open Sans https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

This font is using following CSS file link: https://fonts.googleapis.com/css?family=Open+Sans

Place this link inside the CSS file settings, and set Font Family to 'Open Sans'

Stacks Image 326987


CustomFont Stack