Use your own or custom fonts inside styled text or HTML

The CustomFont Stack allows you to use your own or custom fonts in styled texts or HTML. Be different with choosing your own typography in RapidWeaver projects.

  • Use different kind of fonts - from TrueType to Web Fonts
  • Benefit from all styled text formatting settings
  • Supports beside custom font files also Google, Adobe (Typekit.com), Monotype (Fonts.com), Hoefler&Co. (Typography.com), and other web font providers

Minimum Prerequisites:

  • RapidWeaver 7 or 8
  • Stacks Plugin 3.5
  • PHP 7

Screenshots

Settings
Preview
Preview

Settings

Custom 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 1273678

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 1273682

Wir benutzen Cookies / We use cookies. Info: Datenschutzerklärung / Privacy Policy