Error building tailwind.css when trying to install custom typeface font

[geistmate]

I am trying to add Roboto font to my basic sans fontFamily by extending it.

require("typeface-roboto");

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        logo: ["Roboto", "sans-serif"],
      },
    },
  },
  variants: {},
  plugins: [],
};

When I try to build the file with tailwind CLI, I run into this error:

��� C:\Users\...\frontend\node_modules\typeface-roboto\index.css
@font-face {
^

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (C:\Users\Geistmate\Developer\Learnberry\learnberry-pwa\frontend\tailwind.config.js:1:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

Following this guide here.
https://scottw.com/blog/google-font-tailwind/ and #2060 as reference.

[simonswiss]

Hey!

Are you able to share your code project?

Where are you requiring the typeface-roboto package?

require("typeface-roboto");

I have just made a test project with NextJS and create-next-app. I added the font via the typeface-roboto npm package, required it in my _app.js layout (so it's available on all pages).

I extended the fontFamily object with a logo font, just like you mentioned, and it all works 👍

Here's the repo:

https://github.com/simonswiss/tailwind-roboto-font-example

If you can share your code setup, I'll take a look for you.

[geistmate]

Thank you for the reply! Yes, I in fact was importing it in the wrong place. Once I moved my import to my App.js file as well, the build ran successfully. However, I’m facing a different issue now. The configuration file is updated and I do get my custom class as font-logo, but I think something is happening that it’s skipping over Roboto and going to sans-serif.. I don’t see any font changes whatsoever. I’ll create a new project that mimics my current setup to see if the example can be reproduced. 😊

[geistmate]

@simonswiss Thank you so much! To confirm, I was trying to import it in the tailwind.config.js file, so that's why it was not working. As for the other unrelated issue where it seemed the font wasn't changing: when I installed tailwind, I ran npx tailwind tailwind.js --full, so I needed to edit my tailwind.js file instead of a tailwind.config.js file. It all works now, again thanks and closing this!

[simonswiss]

Awesome, glad it's all sorted for you 👍