"Can't resolve '@fontsource.....'

[dylanesque]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I am trying to self-host fonts using Fontsource, and the site fails to build.

Reproduction Link

https://github.com/dylanesque/metal-detector

Steps to Reproduce

Following the instructions from the docs, I:

1. installed the fonts in question with npm
2. Added the font imports to gatsby-config.js
3. Added a style to h1

Expected Result

I expected the fonts to be loaded and detected without issue.

Actual Result

The site fails to build, with the following stack trace:

failed Building development bundle - 6.160s
ERROR in ./gatsby-browser.js 4:0-35
Module not found: Error: Can't resolve '@fontsource/audiowide.css' in 
'/Users/xxx/Desktop/metal-detector'
 @ ./.cache/api-runner-browser-plugins.js 41:10-41
 @ ./.cache/api-runner-browser.js 4:14-53
 @ ./.cache/app.js 12:0-65 29:0-86 33:20-29 46:0-14 112:17-26 146:6-15 29:0-86

ERROR in ./gatsby-browser.js 5:0-35
Module not found: Error: Can't resolve '@fontsource/open-sans.css' in 
'/Users/xxx/Desktop/metal-detector'
 @ ./.cache/api-runner-browser-plugins.js 41:10-41
 @ ./.cache/api-runner-browser.js 4:14-53
 @ ./.cache/app.js 12:0-65 29:0-86 33:20-29 46:0-14 112:17-26 146:6-15 29:0-86

webpack compiled with 2 errors
success Writing page-data.json files to public directory - 0.175s - 3/7 40.07/s

Environment

System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.19.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.8.1 => 3.8.1
    gatsby-plugin-gatsby-cloud: ^2.8.1 => 2.8.1
    gatsby-plugin-image: ^1.8.0 => 1.8.0
    gatsby-plugin-manifest: ^3.8.0 => 3.8.0
    gatsby-plugin-offline: ^4.8.0 => 4.8.0
    gatsby-plugin-react-helmet: ^4.8.0 => 4.8.0
    gatsby-plugin-sharp: ^3.8.0 => 3.8.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.8.0 => 3.8.0
    gatsby-transformer-sharp: ^3.8.0 => 3.8.0
  npmGlobalPackages:
    gatsby-cli: 3.9.0

Config Flags

No response

[LekoArts]

Hi!

Your reproduction you linked doesn't use any of the things you mentioned?

[dylanesque]

Hi!

Your reproduction you linked doesn't use any of the things you mentioned?

Whoops, repo was behind local, it's definitely there now

[LekoArts]

Your imports are incorrect. If you look at our docs (https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource) or theirs (https://fontsource.org/docs/getting-started) you'll see that for the default import (the 400 weight) you do:

import "@fontsource/audiowide"

// And not
import "@fontsource/audiowide.css"