How to Import custom font families from a local or external source without postcss

[lanelps]

I'm using twin.macro 2.6.1 with a Gatsby.js site. I've followed all the set up guides/ documentation for twin.macro and Gatsby, but I'm having trouble importing custom fonts without using postcss in some way.

Usually I'd have a custom css file importing some fonts using @font-face pointing to a local file or external url, plus the standard @tailwindcss base, components and utilities. This doesn't work however without setting up postcss with twin.macro.

I've tried importing the font-family in the GlobalStyles component and extending a fontFamily class in my tailwind.config.js but this doesn't seem to work either.

Would love any insight as how best to solve this.

[ben-rogerson]

I've tried importing the font-family in the GlobalStyles component and extending a fontFamily class in my tailwind.config.js but this doesn't seem to work either.

This sounds about right, twin has a fonts doc that shows how to setup the first half. You'll then need to import the global styles into a layout component you're using throughout the site.

[lanelps]

@ben-rogerson Thanks for the reply. That configuration in the fonts doc worked for me. I think my main issue was that I wasn't storing my font's in gatsbys static folder, once I did that the font's started pulling through.

[ben-rogerson]

That's great to hear 👍
You may also be able to use gatsby-browser.js to import the fonts - instead of the Layout.js technique I mentioned.