Skip to Content

It’s been a busy few months but with the long weekend looming, I figured I’d stop long enough to share a fun technique I had the chance to end up using that may make for some more aesthetically pleasing dashboards.  After all, a lot of it has to do with presentation (whether we all agree on how important that should be or not.)

So before my time in the BI area, I was a web designer/developer.  One of the considerations during the page design was font choice.  Serif?  Sans-serif?  Playful fonts?  Or boring Arial/Helvetica or (shudder) a client demanding Comic-Sans.  Now, if you are in a scenario where you can get by with just the normal Windows fonts (Arial, Tahoma, Verdana, Segoe UI, whatever), this probably won’t excite you.  However for those cases where you’d like to use the more playful fonts, but aren’t sure how to handle workstations that do not have them installed, read on.

Now, prior to the days of web-fonts, the solution for ensuring what I developed on the website was what viewers had was to use a lowest-common-denominator font, or to raster each heading as a GIF/PNG and put it in the page that way.  (This was early 2000s, if I recall)  While web-fonts now help, in that we can dynamically load them via @font-face CSS rules, there still some annoyances I have:

You must have confidence that the font url is reliable, and you must also host that font file somewhere.  As we know with MIME resources in Design Studio implementations on BI Platform or NetWeaver, this can be tricky or cumbersome.  These are sentiments I share with Image files in Design Studio, which I’ve gone the way of Base64 encoding in source tags where it makes sense.  Which lead me to wonder if I couldn’t do the same for web fonts.

Turns out you can!

In an effort to not reinvent the wheel, I did a quick Googling of ‘web fonts’ and ‘Base64’ and ran across this page:

http://sosweetcreative.com/2613/font-face-and-base64-data-uri

It turns out that there’s an excellent website, Font Squirrel, which will take a Font you like, and Base64 encode it for you into your own CSS rules that you can then incorporate into Design Studio.  (http://www.fontsquirrel.com/tools/webfont-generator)

The end result is a self-contained Design Studio application that does not rely on external URL resources so that you are guaranteed that the user experience is reliable and consistent.  The below example are two standard Design Studio text items showing the application of two custom embedded fonts, all contained in the one CSS style sheet:

step 1.png

The two fonts I used ‘Pacifico Regular’ (in green), and ‘TeX Gyre Adventor’ (in black).  The resulting CSS is attached as a .txt file in this post.  To see it in action, include the contents of the file in your CSS file that you are using in your application (Application Properties, under ‘Custom CSS’)

Now go make some pretty dashboards that aren’t in boring Arial!  😀

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Christoph Wassermann

    Thanks for the article Mike! I am actually having problems with additional fonts in one of my current projects. It is deployed on BI Platform and works fine, except every now and then, some of the fonts fail to get loaded . It’s really unpredictable and infuriating.

    I’m using Base64 encoded background images quite a bit, but I hadn’t connected the dots and used the same technique for fonts. Will try this right away.

    (0) 
  2. David Gyurasz

    Thanks for sharing this information Mike! Great way of including fonts with base64 encoding. Less files, less problems when moving between different environments/systems.

    Accidentally I stumbled upon the Google Fonts API today, which can also be used to add fonts to your web pages (Design Studio BI Apps). All you have to do is add a special stylesheet link to your custom css file by using the import method at the very top of your custom css file, then refer to the font in a CSS style. Currently there are 635 font families available to choose from.

    (0) 
    1. Mike Howles Post author

      Thanks, David.

      Google Fonts API is a great resource for sure.  My only reservation is that you now rely on availability of those font resources from Google, and while most corporate firewalls probably do no block Google, it is another system involved in the solution.  By Base64 encoding it within CSS, we can overcome that if it is an issue.

      (1) 
      1. Christoph Wassermann

        I agree with the above, just wanted to add/clarify that you can work around the two sources problem by downloading the Google Web Font(s) you are using and then base64 encoding them into your CSS. You don’t have to use @import.

        Just in case there is one Google Web Font that you feel you cannot live without 🙂

        (0) 
        1. Mike Howles Post author

          Christoph, that’s actually exactly what I’m doing.  It’s all Base64 encoded in the example CSS file.  🙂

          (0) 

Leave a Reply