Fonts (and all other styling) are controlled via SASS (a compile-able version of CSS) in 5.19. We recommend you use Scout to edit these themes.
In order to implement a custom font, you'll need the "ttf" font file(s). Place those in your project theme folder. Then, in
theme\styles\sass\custom\base
folder, you'll see _base.scss. Edit that and define your font:
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.com/fonts/font.ttf'); /*URL to font, should be something like '/font.ttf*/
}
Then, use that custom font-family throughout the app like this:
.classname {
font-family: 'YourFontName';
}
You can likely just set up this custom font-family in the "body" tag and let it cascade through the rest of your app, like this:
body {
font-family: 'YourFontName';
}
Finally, you'll need to compile the updated SASS with Scout.
Some remarks, if you want to support the most browsers make sure you add these type of files:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
https://css-tricks.com/snippets/css/using-font-face/
2nd: if you use the new MendixUx release it is easier to replace the variable found in the _custom-variables.scss file (found in sass/custom/) this will replace the font throughout the whole theme.
$font-family-base: 'MyWebFont';
CSS3 fonts may help you here: http://www.w3schools.com/css/css3_fonts.asp
You need to place the font files in the theme directory and reference it from the CSS