Tag: fonts in design studio

Custom Fonts in Design Studio

There are a lot of fonts which are supported by Design studio by default, but there are infinite varieties of fonts available in the internet and not all of them are supported by Design Studio directly. If you need to use one of the fonts in your design studio application, there is an easy way of doing so without having to install the font library on the end user’s computer. There are a lot of fonts which convert alphabets into images which can be used on the dashboards as images. Here is how to do so.

  1. Usually the default font types are supported on all browsers and don’t need any installations on the end user’s machines or any CSS scripting to add the font families. But for font types like “SAP-Icons” (this is a font type which converts unique texts to images you can use on the dashboards. Ex : https://openui5.hana.ondemand.com/iconExplorer.html)
  2. There are a lot of websites where you can look up for fonts you need but most of them are not free. I found one website which offers font types for free for commercial use as well.

    http://www.fontsquirrel.com/fonts/list/find_fonts

  3. Go into the website and download the .ttf file for required fonts. In the below example I am trying to add a new font called “Roman Caps”.

  4. To start adding a new font family to your design studio dashboard, you will need a .ttf file and .eot/.woff file as well.

    Note: .eot is a file type which is supported only in IE. If your target browser is anything other than IE, you might have to get the .woff file as well.

  5. Creating an .eot or .woff file can be done using a lot of websites for free available on google.
  6. Once you have the .eot and .ttf files ready, you have to upload these files to the repository folder and create a CSS file where you can import these 2 files.

  7. Now, to import the above 2 files into a CSS file and add the new font-family to your design studio dashboard put in the below code in your CSS file.

  8. With the above step, when you reference the .css file in your dashboard as custom CSS file, the new font face will be available for use in your dashboard.
  9. I used a text component to test if the new font type is working, and to do so, I created a CSS class in the .css file to use the new font family that I just imported.

  10. After I save the css file also and reference it in the dashboard and apply the CSS class to the text object here is the result I get.

  1. As a next step, I am exploring if I can use the same kind of CSS scripting to change the font types on charts and other components as well and I will update the post as soon as I find something.

Happy designing

Naveen Mamidi

Tek Analytics BI Practice