Use a custom font throughout all of your application

3
Our customer has their own corporate fonts they would like to use throughout an application. How would I go about implementing such a thing? I'm using the new MendixUx I've tried searching the forums, but all posts regarding custom fonts are related to documents. We would like style the application using their font. Would this be possible?
asked
3 answers
16

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.

answered
8

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';
answered
3

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

answered