One thing we love to brag about with our Portal 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 Portal is "on brand" quickly. One styling element you might be missing - until now - is custom fonts for Portal.
In this post, we’ll walk you through how to use custom fonts within our
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
& to get
For both Adobe and Google fonts, you will first need to import the fonts using the
settings property for both the React and Angular packages.
As we stated, the
integrations setting is how we import the fonts into Portal. To use the fonts, you'll also need to call the font family 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!