Tips & Tricks - Embedding Fonts

This post shows how to integrate additional web fonts into Intrexx. This requires that the additional fonts be available in the corresponding weight (font-weight). Please note that not all fonts have the same specifications and should therefore be checked individually. To embed images in Intrexx, use the .woff and .woff2 file formats.

CSS

If you have downloaded a web font, unzip the ZIP file into the portal directory "external/htmlroot/fonts/custom/<my-font>". The "custom" folder must be created if it does not already exist.

Create a corresponding CSS file in the same folder. Use the font name as the filename for the CSS file. Copy the CSS generated by the font provider and paste it into the file. The `font-face` declarations specify the font names that can later be used in the Intrexx layout. Here is an example CSS:

/* my-font-regular - latin */
@font-face {
  font-family: 'my-font';
  font-style: normal;
  font-weight: 400;
  src: local('my-font Regular'), local('meine-schriftart-Regular'),
       url('./my-font.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./my-font-v1-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* my-font-700 - latin */
@font-face {
  font-family: 'my-font';
  font-style: normal;
  font-weight: 700;
  src: local('my-font Bold'), local('meine-schriftart-Bold'),
       url('./my-font-v1-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./my-font-v1-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Load fonts

Open the "custom_head.vm" file in the portal directory "internal/system/vm/custom" and add the "my-font.css" file as a stylesheet:

## embed custom fonts
<link rel="stylesheet" href="/fonts/custom/my-font/my-font.css"/>

Using Fonts

In Intrexx, the new font can now be used in any application or in the "Design" module within existing layouts. Open the Properties dialog box for an element and go to the "View" tab. Click on " " and then "Add CSS Rule."

The font-family can now be specified directly in the CSS using

font-family: "my-font";

be registered as a separate style. The available font weights are 400/normal and 700/bold—as previously selected.

By the way, you can find the standard Intrexx fonts in the portal directory "external/htmlroot/fonts".