Advanced Techniques - Integrate web fonts
This workshop demonstrates how additional web fonts can be integrated into Intrexx.
Requirements
Additional fonts need to be available in the corresponding weight (font-weight).
Please note that not all fonts have the same specifications and should therefore
be checked on a case-by-case basis.
Example
Font
In our example, we are going to integrate the "Baloo 2" font. This can be downloaded
from
https://fonts.google.com.
However, we will not use the direct download option because this only provides
fonts in the .ttf format. To integrate fonts into Intrexx, we need the .woff or
.woff2 format. Therefore, we will use the following generator instead:
https://google-webfonts-helper.herokuapp.com/fonts.
Generate font files and CSS
Search for "Baloo 2" at the top left of the generator page.
Select the "regular" and "700" (bold) styles. Click on "Modern Browsers" under "Copy CSS"
to remove older font formats from the package. Enter "./" as the folder prefix.
Now, download the prepared ZIP file.
Add font files to the portal
Unzip the downloaded file into the
portal directory
external/htmlroot/fonts/baloo2.
Create CSS
Create a CSS file called "baloo2.css" in the same folder.
Copy the generated CSS from https://google-webfonts-helper.herokuapp.com/fonts
and past it into the file. The "font-face" declarations provide the font names
that can be used in the Intrexx layout later. Here is our example CSS:
/* baloo-2-regular - latin */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 400;
src: local('Baloo 2 Regular'), local('Baloo2-Regular'),
url('./baloo-2-v1-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./baloo-2-v1-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* baloo-2-700 - latin */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 700;
src: local('Baloo 2 Bold'), local('Baloo2-Bold'),
url('./baloo-2-v1-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./baloo-2-v1-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Load fonts
Open the file "custom_head.vm" in the
portal directory
internal/system/vm/custom and add "baloo2.css" as a stylesheet:
## integrate custom fonts
<link rel="stylesheet" href="/fonts/baloo2/baloo2.css"/>
In Intrexx, the new font can now be used in any
applications or
layouts.
Open the
properties dialog of an
element and go to the
Style tab.
Click on

"Add CSS rule" there.
The font family can now be added as a custom style in the CSS with
font-family: "Baloo 2";
You can choose between 400/normal und 700/bold - as selected in the generator earlier -
for the font-weight.
By the way, the Intrexx default fonts are stored in the
portal directory external/htmlroot/fonts.