# Fontsource Error - Unexpected character '@'

**URL:** https://discourse.roots.io/t/fontsource-error-unexpected-character/22629
**Category:** bud
**Tags:** webpack
**Created:** 2022-03-18T21:35:08Z
**Posts:** 3

## Post 1 by @BrandonBorders — 2022-03-18T21:35:08Z

Hey all,

Trying to use [GitHub - fontsource/fontsource: Self-host Open Source fonts in neatly bundled NPM packages.](https://github.com/fontsource/fontsource) to import fonts. I’m placing the following in my app.js file.

```
import "@fontsource/libre-franklin";
```

Which results in the following error:

```
┌ error ──────────────────────────────────────────────────────────────────┐
│ │
│ Module parse failed: Unexpected character '@' (2:0) │
│ You may need an appropriate loader to handle this file type, currently │
│ no loaders are configured to process this file. See │
│ https://webpack.js.org/concepts#loaders │
│ | /* libre-franklin-vietnamese-400-normal*/ │
│ > @font-face { │
│ | font-family: 'Libre Franklin'; │
│ | font-style: normal; │
└─────────────────────────────────────────────────────────────────────────┘
```

Any thoughts on how to resolve? First time using bud, but I’ve used fontsource many times in Laravel Mix projects without issue.

---

## Post 2 by @kellymears — 2022-03-19T01:51:30Z

Not many people want to load source code from `node_modules` so bud doesn’t bother to look for source code there. Bud will only pass code off to loaders that originates in the `app.path('@src')` directory (by default: `'src'`; with sage: `resources`).

This is 95% of the time what people want. And, by narrowing down the places a module can be resolved from, we end up with a much faster build.

In contrast, mix tries literally every module (file) in the project. This is the opposite approach so as to avoid making everybody’s project slower.

I think this overhead is worth it and so that’s the way Bud is built. But, I also know that people are going to want to load all kinds of things from `node_modules`, so there is an API to help.

## Registering additional module paths with loaders

Looking in the `@fontsource/libre-franklin` directory I can see we want to load css. So we need to tell bud to try and load `.css` from that directory.

**Options**

Ordered from most forgiving to most optimal:

1. Try to load modules from anywhere in the project:

```
app.build.rules.css.setInclude([app.path()]);
```

1. Try to load modules from the source directory or the `node_modules` directory:

```
app.build.rules.css.setInclude([
  app.path('@src'),
  app.path('@modules'),
]);
```

1. Try to load modules from the source directory or the `@fontsource` directory:

```
app.build.rules.css.setInclude([
  app.path('@src'),
  app.path('@modules/@fontsource'),
]);
```

1. Try to load modules from the source directory or the `@fontsource/libre-franklin` directory:

```
app.build.rules.css.setInclude([
  app.path('@src'),
  app.path('@modules/@fontsource/libre-franklin'),
]);
```

Any of these will allow you to resolve css files from `node_modules`.

Note: `app.build.rules.css.setInclude` does not chain. You will want to wrap it in `bud.tap` if you want to keep your configuration file functional:

```
// ...config
    .tap((app) => {
      app.build.rules.css.setInclude([
        app.path("@src"),
        app.path("@modules"),
      ]);
    });
```

---

## Post 3 by @BrandonBorders — 2022-03-22T12:54:19Z

Went with option 1 and it worked. Thanks for the detailed response!