Benutze eigene oder kundenspezifische Fonts in gestyltem Text oder HTML

Der CustomFont Stack erlaubt, Deine eigenen oder kundenspezifischen Fonts in gestyltem Text oder HTML zu benutzen. Steche mit eigener Typographie aus anderen RapidWeaver Projekten hinaus.

  • Verwende verschiedene Arten von Fonts - von TrueType zu Web Fonts
  • Profitiere von allen Styled Text Formatierungsmöglichkeiten
  • Unterstützt neben eigenen Font Dateien auch Google, Adobe (Typekit.com), Monotype (Fonts.com), Hoefler&Co. (Typography.com), und andere Web Font Anbieter

Mindestvoraussetzungen:

  • RapidWeaver 8
  • Stacks Plugin 4
  • PHP 7.2

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

inStacks Software

Die Seite für innovative Stacks für RapidWeaver, die ihren Schwerpunkt auf Integration und Effektivität setzen.
Alle Stacks benötigen RapidWeaver 8 von RealMac Software und das Stacks 4 Plugin von YourHead.

© Futural UG (haftungsbeschränkt)

de

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