Custom Google Fonts in Data Studio

Introduction

Google Data Studio is a great data visualization tool and it’s been evolving quickly over the years, but there are still some basic features missing from the interface.

These tiny limitations aren’t critical, they don’t break your report, but for those spending most of their time in Data Studio, lack of those features can become a little bit annoying at times.

Google slowly releases some “quality of life” features, but no one knows when to expect them, and it’s most likely that they’re at the bottom of the priority list. 

The Problem: Limited Choice of Fonts

If you spend a lot of time working in Data Studio, you will certainly remember not being able to draw a line and instead, having to create a rectangle and decrease the width or height so much that it looks like a thin line, or not being able to choose the exact font size e.g., something between 14px and 18px for a while until Google released the option of having 16px fonts too!

It’s still not possible to set the font size manually and the list of the fonts available to choose from is limited to only 38 options, including the usual suspects like Arial, Calibri, Comic Sans, Verdana, Times New Roman, and Trebuchet. Plus, the choice of font-weight is limited to just Regular and Bold.

Not only this limits the look and feel of all Data Studio reports created and shared around the world, but also this hugely impacts the creators of reports in non-English languages like Japanese, Arabic, Korean, Indian, and Hebrew, making them unable to use any of the fonts designed specifically for their own language and forcing them to use the few available choices.

Compare this to some 900+ font families that are available for free on Google Fonts, including some with up to 18 styles, and the fairly recent variable fonts. So it’s just natural for many people to want to know how to add custom fonts in Data Studio reports or more specifically: How to use Google Fonts in Data Studio?

As someone who’s passionate about design and the aesthetics of my reports, this lack of choice has always bugged me, and unlike creating a line by tweaking a rectangle there was no simple workaround for this.

So a few weeks ago I sat with my developer and we tried to come up with a solution.

The Solution: Community Visualization

We decided to leverage a fairly recent feature of Data Studio to overcome this limitation: Community Visualizations & Components which is currently in developer preview and finally, last week, we had the first stable release:

This component allows placing text on the report canvas using any font family available on Google Fonts, setting it to any size and weight, and applying any style to it using the power of CSS. Let’s see how it looks:

With this Google Font component now you can:

1. Select any Google Font by entering its style URL and name
2. Use the full power of inline CSS at your fingertips to style the text however you want. This includes setting the color, size, transparency, text alignment, line-height, padding, or even shadow (color, distance, blur) or crazier options like 3D text effects!

For example, I tweaked the CSS of this 3D text effect and applied it to the component, and here’s the result I got in Data Studio:

It’s time to get creative and use better typography in reports!

This Google Fonts component is exclusively available to our newsletter subscribers. You can join now and I’ll send you the instructions on how to manually add it to your reports. It’s quick and easy and requires no coding knowledge.

Important note:

Thanks to the wonderful Lee Hurst @helpfullee for bringing this to my attention: Although this component doesn't render any data from the data source, it still needs to have a data source assigned to it. Plus, for the component to work the Community Visualization Access option should be turned on.

To do that, first click to edit the data source and then click to turn on community visualization access:

If you have any questions or ideas for improvement, please comment below and I’ll get back to you as soon as I possibly can. :)