Using custom fonts in Flatfile’s data onboarding platform

One thing we love to brag about with our Flatfile’s data onboarding platform product is that by adding a little bit of styling, it looks and feels like just another piece of your application. Companies can use their own colors, similar padding, border radius, etc, and Flatfile’s data onboarding platform is "on brand" quickly. One styling element you might be missing - until now - is custom fonts for Flatfile’s data onboarding platform. 

In this post, we’ll walk you through how to use custom fonts within our integrations and theme settings to bring in the fonts that match your application. 

Let's first note that we currently allow you to grab fonts from Adobe Fonts or from Google Fonts. When bringing fonts in from Adobe Fonts, you will need your TypeKit Project Id. For Google Fonts, you will need to pull the family from the query parameter inside the URL you can grab after adding which fonts to import. The link should look something like https://fonts.googleapis.com/css2family=Roboto:wght@400;700&display=swap and you'll need to pull out the everything between the family= and & to get Roboto:wght@400;700.

For both Adobe and Google fonts, you will first need to import the fonts using the integrations option in your Flatfile config. Below is the JavaScript implementation, but you can use the same settings object inside the settings property for both the React and Angular packages.

As we stated, the integrations setting is how we import the fonts into Flatfile’s data onboarding platform. To use the fonts, you'll also need to call the font family inside the theme setting. Again, the below example is in JavaScript, but you can add themes to the object inside the settings property for our React and Angular packages as well.

With custom fonts that match your application, your users won’t be able to tell that importing data isn't just another piece of your solution!