Tips & Tricks - Integrate fonts

This workshop demonstrates how additional web fonts can be integrated into Intrexx. The prerequisite for this is that the additional fonts are available in the corresponding weight (font-weight). Please note that not all fonts have the same specifications and should therefore be checked individually. The .woff and .woff2 formats should be used for integration into Intrexx.

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 name of the font as the file name of the CSS file. Copy the CSS generated by the font provider and paste it into the file. The font-face declarations provide 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 "internal/system/vm/custom" portal directory and add the "my-font.css" file as a style sheet:

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

        

Use fonts

In Intrexx, the new font can now be used in any application or in the "Design" module in existing layouts. Open the properties dialog of an element and switch to the "View" tab. Click on "Add CSS rule".

The font family can now be added as a custom style directly in CSS using

            font-family: "my-font";
        

can be entered as a separate style. The font weights 400/normal and 700/bold - as previously selected - are available.

The Intrexx standard fonts can be found in the portal directory "external/htmlroot/fonts".