sass - In a Gatsby site with SCSS how do I import local fonts?

Question

Noob to Gatsby and SCSS I wanted to dive into both and learn them beginning of the new year. After following the Gatsby tutorial I wanted to dive in and build a site based off the gatsby-starter.

Followed the documentation for install & config for SASS.

In src created a directory named fonts and added Open Sans:

src/fonts/OpenSans-Regular.ttf
src/fonts/OpenSans-Bold.ttf
src/fonts/OpenSans-Italic.ttf

created a directory in src for SCSS called main.scss and created a partial directory to bring in typography:

src/styles/main.scss
src/styles/partials/_typography.scss

main.scss:

@import 'partials/typography';

body {
  font-family: $font-primary;
}

_typography.scss:

$font-primary: 'Open Sans', sans-serif;

// Body Font:
@font-face {
  font-family: $font-primary;
  font-style: normal;
  font-weight: normal;
  src: url('../../fonts/OpenSans-Regular.ttf') format('truetype');
}

In index.js I bring in the SCSS with no issues:

import React from 'react'
import '../styles/main.scss'

const Home = () => {
  return <div>Hello world!</div>
}

export default Home

but in the terminal I get font errors for each font:

Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'

If you're trying to use a package make sure that '../../fonts/OpenSans-Regular.ttf' is installed. If you're trying to use a local file make sure that the path is correct. error Generating development JavaScript bundle failed

Per research I dont see an answer and I've read:

• global scss in Gatsby
• Using Local Fonts

gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-sass`],
}

Why am I getting an error when trying to bring in local fonts for this site? Also, I'm bringing in the local font because I read in the documentation there is an offline ability.

---

Edit:

Forked Gatsby with the Hello World Starter:

question from:https://stackoverflow.com/questions/65660530/in-a-gatsby-site-with-scss-how-do-i-import-local-fonts

Answer 1

The mindset and your approach is perfectly valid and the issue relies on the relativity of the paths in your _typography.scss. Use something like this:

$font-primary: 'Open Sans', sans-serif;

// Body Font:
@font-face {
  font-family: $font-primary;
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
}

Notice the error prompted:

Can't resolve '../../fonts/OpenSans-Regular.ttf' in '/path/to/project/src/styles'

/path/to/project/src/styles it's weird, it seems that you have something hardcoded somewhere because of the /path/to/project/ part. Give it a look too.

The issue relies on your path, which is relative to the main.scss file, not to the partial since, in the end, the partial belongs to the main.scss file because you are importing it directly.