Skip to main content

Changing fonts

Header

Level: Beginner

Keywords: font, font-face, css

The result: setting specified font for SAMO application

It is possible to set your own font in whole SAMO client. However note that there can still be some components which doesn't support changing the font. Please create Jira issue for these missing parts.

Steps:​

  1. Download your font (.ttf)
  2. Create new folder in resources/themes/fonts/nameOfYourFont and place font files there
  3. Go to resources/themes in project and find file resources/theme/fonts.css - if file does not exist, create new one example with playfair font:

Font structure - example with playfair font

  1. Edit font.css file and add your new @font-face with the path to your .ttf files (try to check how @font-face is made out of .ttf font file)

Font-face

Important: Name of your font-family is up to you but remember you must use the same name when you will apply this font (see point 6)

  1. Go to project's boot.js and load font.css file (use prepareLinkResource function)

Boot.js

  1. Go to project's samo.js and update--paper-font-common and --paper-font-common-base

CSS property

  1. Go to GTW console, reload configuration and restart the project
  2. Fonts should be applied

Result