Design Studio 1.2 - Embedding Bullet-proof Web Fonts

[mike_howles4]

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:

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!  :grin: