I am currently receiving errors in two child components of my Gatsbyjs project that import my global.scss file where I am attempting to load a local font giving me this error :

ERROR in ./src/components/elements/Nav/nav.scss Module build failed (from ./node_modules/mini-css-ext ract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve '../../public/static/fonts/GangsterGroteskRegular.woff2' in '/Projects/src/components/elements/Nav' at finishWithoutResolve

I have attempted to import the SCSS files more globally using the gatsby-browser.js file but that doesn't seem to filter down to child components.

I have already tried addressing this with Webpack and installing gatsby-plugin-web-font-loader as it seems the issue stems from there but nothing has worked thus far.

My global.scss file:

@font-face {
    font-family: 'GangsterGrotesk';
    src: local('GangsterGrotesk'),
        url('../../public/static/fonts/GangsterGroteskRegular.woff2')
            format('woff2');
}


$font: 'GangsterGrotesk' sans-serif;
$font-stack: 'GangsterGrotesk' sans-serif, 'Arial' sans-serif,
    'Helvetica' sans-serif;

body {
    margin: 0;
    padding: 0;
    font-family:$font-stack:;
}

nav.tsx

import React from 'react';
import { Link, withPrefix } from 'gatsby';
import { siteData } from '../../../config/index';
import './nav.scss';

const Nav = () => {
    const { menu } = siteData.navLinks;

    return (
        <nav>
            <Link className="logo" to="/">
                <h4>{siteData.siteTitle}</h4>
            </Link>
            <ul className="nav__list">
                {menu.map(({ name, url }, key) => {
                    return (
                        <li className="nav__item">
                            <Link className="nav-link" key={key} to={url}>
                                {name}
                            </Link>
                        </li>
                    );
                })}
            </ul>
        </nav>
    );
};

export default Nav;

nav.scss

@import '../../../styles/global.scss';

nav {
    padding: 0.25rem 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background: $col-bg;
    position: fixed;
    overflow: hidden;
    border-bottom: 1px $col-border solid;
    & > * {
        overflow-x: none;
    }
}

.nav__list {
    align-self: center;
}

.nav__item {
    display: inline-block;
    padding: 0 2rem 0 2rem;
}

CodePudding user response：

I wouldn't recommend pointing the/public folder to load local fonts. That folder is generated during the build process (gatsby build) and won't be always accessible when requesting it in gatsby develop for example. I'd recommend using a sourced folder (inside /src) or using the static folder, as described in the using local fonts docs.

For example, using a /src/fonts/GangsterGroteskRegular.woff2 folder, the approach should be:

@font-face {
  font-family: "GangsterGrotesk";
  src: url("../fonts/GangsterGroteskRegular.woff2");
}

Note: tweak the local path of src rule accordingly

Then, you will be able to assign $font:

$font: 'GangsterGrotesk' sans-serif;

CodePudding user response：

1. Download the font
2. Create a Fonts folder in the source directory

.src/fonts

3. Copy the fonts you want to use (e.g. AssistantRegular.ttf) into the ‘fonts‘ directory.

4. In the project’s index.js, import the fonts you want to use.

5. In the projects index.css add the font-face

@font-face { font-family: "AssistantRegular"; src: local("AssistantRegular"), url("./fonts/assistant.regular.ttf") format("truetype"); font-weight: normal; }

.woff -> format("woff"), .ttf -> format("truetype") .eot -> format('embedded-opentype') .svg#vtks_sonhoregular _> format('svg')

6. Now the font/s are available to the project and can be used in regular CSS etc

.body { font-family: AssistantRegular; ... }