How to use TypographyJS in NetlifyCMS Previews

*This post was first published on my blog.

Today is a little different from the usual longer posts and lot more niche. This is about an issue that I ran into recently and thought it would have been nice if somebody had written about it. Let me explain!

Table Of Contents

• About NetlifyCMS and Typography.js
• Always read your documentation
• The solution

About NetlifyCMS and Typography.js

As a big advocate of the JAMstack and in particular Gatsby, I have tried out numerous different CMS and they all have their use cases, but one I often come back to for smaller projects is NetlifyCMS.

It's free for my use cases and just so easy to use that once set up, it's very easy to teach my clients how to log in and change content on their own.

There is a lot to say about NetlifyCMS, but that is not what this post is about. This post is about one specific problem that I ran into while I was working on a project recently.

I had started working on a Gatsby site with Typography.js & NetlifyCMS. Not thinking much about it in the beginning.

Typography.js is quite a powerful tool to set up your typography and font styling, so it looks nice and consistent throughout the project. (You can learn more about it here) However, Typography.js uses JavaScript to inject the styling into your project. Once I had started my NetlifyCMS and started preparing custom previews for some of my pages, I realised:

None of the font styles were applied to the previews within the CMS!

With CSS files you can simply import them to your preview JSX file, but how would I have to go about injecting Typography.js not only into one custom preview but into all of them?

Always read your documentation

First I started reading through the NetlifyCMS documentation to see if there was a more general way to add styling sheets to the CMS instead of manually importing them to each custom preview. And lo and behold, there was! Here is a snippet from the documentation.

// index.html
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<script>
  CMS.registerPreviewStyle("/example.css");
</script>

But this didn't completely solve my problem and so I started wondering, maybe there was a way to get the CSS styles from Typography.js. Because if you think about it, it ends up being injected as CSS later on anyway, right?

And I was right. After going through the documentation, Typography.js had a function to output the CSS styling as a string. Just what I needed.

import Typography from 'typography'

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.666,
  headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
  bodyFontFamily: ['Georgia', 'serif'],
  // See below for the full list of options.
})

// Output CSS as string.
export const typographyCSS = typography.toString()

The Solution

I have always loved how coding is solving one problem after another and this was exactly that. Now that I knew that I could output my typography styling as a CSS string, I only had to register that styling inside the CMS config file. Here we go:

import { typographyCSS } from '../utils/typography'

CMS.registerPreviewStyle(typographyCSS, { raw: true })

It's a CSS string though not a file

However, you might have noticed the { raw: true }, the second argument in our registerPreviewStyle function. This is because the function usually expects a CSS file instead of a CSS string. We can fix this by setting this second argument. You can read more about it here!

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!