Gatsby: Webfontloader plugin self-hosted fonts not loading

[fauslg]

Summary

I want to use self-hosted fonts using Webfontloader but when I check google chrome dev tools NETWORK TAB > fonts, the fonts.css file appears in red and status is cancelled. The fonts of course won't load.

Relevant information

This is what I'm doing:

In gatsby-config.js I added the plugin and a custom line like this:

{ 
resolve: 'gatsby-plugin-web-font-loader',
      options: {
        custom: {
          families: ['SchnyderS', 'Circular'],
          urls: ['src/fonts/fonts.css']
        }
      }
    }

the fonts are inside the fonts folder.

In fonts.css I have this:

@font-face {
    font-family: 'SchnyderS';
    src: url( 'SchnyderS-Light-Web.eot') format('eot');
    src: url( 'SchnyderS-Light-Web.eot?#iefix') format('embedded-opentype'),
         url( 'SchnyderS-Light-Web.woff') format('woff'),
         url( 'SchnyderS-Light-Web.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
  }
  @font-face {
    font-family: 'SchnyderS';
    src: url( 'SchnyderS-Demi-Web.eot') format('eot');
    src: url( 'SchnyderS-Demi-Web.eot?#iefix') format('embedded-opentype'),
         url( 'SchnyderS-Demi-Web.woff') format('woff'),
         url( 'SchnyderS-Demi-Web.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Circular';
    src: url( 'lineto-circular-pro-book.eot') format('eot');
    src: url( 'lineto-circular-pro-book.woff') format('woff'),
         url( 'lineto-circular-pro-book.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: 'Circular';
    src: url( 'lineto-circular-pro-medium.eot') format('eot');
    src: url( 'lineto-circular-pro-medium.woff') format('woff'),
         url( 'lineto-circular-pro-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'Circular';
    src: url( 'lineto-circular-pro-bold.eot') format('eot');
    src: url( 'lineto-circular-pro-bold.woff') format('woff'),
         url( 'lineto-circular-pro-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }

I don't know what I am missing...

[sidharthachatterjee]

Hey @fauslg

You need to move the fonts.css file to the static directory and change

urls: ['src/fonts/fonts.css']

to

urls: ['fonts.css']

[sidharthachatterjee]

What you saw with the request being cancelled was because

• src/fonts/fonts.css is a route that is not being served by the dev server and therefore the dev server returns a 404
• The 404 being an html file causes the request to be cancelled because of a strict mime type check

[JLGouwy]

Hi @sidharthachatterjee ,

I use globally style. I follow the docs, I just put in gatsby-browser, :

import "./src/styles/scss/index.scss"

and use gatsby-plugin-sass plugin.

But my localhost doesn't respond anymore, the localhost:8000 loops indefinitely !
I comment de @font-face import in my scss, and then, all works.

So, I suppose i miss something.

This is my font-face import

@font-face {
  font-family: 'Lato-300';
  src: url('../../fonts/lato-v14-latin-300.woff2') format('woff2'),
    url('../../fonts/lato-v14-latin-300.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  src: url('../../fonts/lato-v14-latin-300.eot');
    src: url('../../fonts/lato-v14-latin-300.eot?#iefix')  format('embedded-opentype'),
    url('../../fonts/lato-v14-latin-300.woff') format('woff'),
    url('../../fonts/lato-v14-latin-300.ttf')  format('truetype'),
    url('../../fonts/lato-v14-latin-300.svg#Lato-300')  format('svg');
}

Do I have using the gatsby-plugin-web-font-loader plugin also ?
I'm a little bit confuse how it works to load webfont with globally style.

thanks a lot.

EDIT 1 :
I just put the fonts folder in static folder.
And then, rename all url into /fonts/name.extension. It works now.
I wanted to follow the recommandation in the documentation putting all fonts, scss in /src folder.

[fauslg]

Hey @fauslg

You need to move the fonts.css file to the static directory and change

urls: ['src/fonts/fonts.css']

to

urls: ['fonts.css']

Thanks so much for your help!

[sidharthachatterjee]

@JLGouwy

I just put the fonts folder in static folder.
And then, rename all url into /fonts/name.extension. It works now.

Sorry about the confusion! The difference here is that since you're importing the scss file in gatsby-browser, the styles are loaded on the client side only and when they try to get the font files from a url like '../../fonts/ it breaks because that url doesn't exist!

Good rule of thumb here is that if you want something to be accessible from the browser (if it isn't already processed and put in your bundle by webpack), then you ought to put it in the static directory.

Closing this for now since the issue seems resolved but please feel free to reopen or comment if not

[bastianfiebig]

if i put fonts.css in the static folder, the file will be removed on every restart/rebuild. What am I doing wrong?

[jlgouwyapizr]

@bastianfiebig Where is your static folder ?
I have the feeling you put your file in /public/static folder. But you don't need to touch inside /public.
You need to create a static folder on the root of your project. At the same level than /src.

[johnmikel]

Hey @fauslg
You need to move the fonts.css file to the static directory and change
urls: ['src/fonts/fonts.css']
to
urls: ['fonts.css']

Thanks so much for your help!

This doesn't work for me. Whenever I attempt to build my gatsby project, I have to manually move the font.css to the public folder and then only 'gatsby develop' will run.

Am I missing something? It's the same thing that's happening with @bastianfiebig

[johnmikel]

@bastianfiebig Where is your static folder ?
I have the feeling you put your file in /public/static folder. But you don't need to touch inside /public.
You need to create a static folder on the root of your project. At the same level than /src.

Yes I did this too btw, the src folder is in the same level as the static folder. It is still not working for some unknown reason. :/

Thanks for the help!

[johnmikel]

Ok, I think this should work.
Try referencing the fonts.css in the gatsby-browser.js file like this:

```/**

• Implement Gatsby's Browser APIs in this file.
  *
• See: https://www.gatsbyjs.org/docs/browser-apis/
  */

// You can delete this file if you're not using it
import "./static/fonts.css"
```

[brohlson]

After trying both methods, the suggestion by @johnmikel works most reliably for me. When loading the custom families through WebFontLoader, oftentimes the initial script load would happen too long after the page elements load & the custom fonts would fall back permanently. 🤷

[wesbos]

Just tried a few different ways and plugins to load a font in Gatsby and @johnmikel's method is the only one that worked. Def needs to be documented better

[LeonSkrilec]

Same for me, it works only after importing files in "gatsby-browser.js" as @johnmikel mentioned.

[intelligence]

@wesbos @LeonSkrilec Did you get it to work with WF or just to display the font at all?

Font is loading for me with just this in gatsby-config.js:

    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        custom: {
          families: [`Helvetica Now`],
          urls: [`/fonts.css`]
        }
      }
    },

But WF is still showing wf-helveticanow-n4-inactive wf-inactive on html element. Same for you?

Edit: So @font-face had font-family: HelveticaNowDisplay-Md after changing it to font-family: 'Helvetica Now' it works as intended.

[LeonSkrilec]

After going with johnmikel's solution I found it not working on production sub-pages, because it was referencing fonts relative to current url.
Instead I moved fonts to my static folder and reference them with absolute path in Web font loader like this:

{
    resolve: 'gatsby-plugin-web-font-loader',
      options: {
        custom: {
          families: ['Cherrydorry', 'Rama Condensed', 'Rama Regular'],
          urls: ['/fonts/cherrydorry-export/cherrydorry.css', '/fonts/rama/fonts.css']
        },
        google: {
          families: ['Roboto Condensed:400,700,300']
        }
      }
}

This is working now in dev and production environment.

[ryudice]

https://github.com/gatsbyjs/gatsby/issues/11118#issuecomment-472290405 worked for me as well. I did the following:

• placed custom fonts in static/fonts directory
• placed fonts.css in static directory
• Add the required plugin configuration with the name of the family
• Until this point it was working until I imported fonts.css in gatsby-browser.js

[Darkensses]

Ok, I think this should work.
Try referencing the fonts.css in the gatsby-browser.js file like this:

 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

// You can delete this file if you're not using it
import "./static/fonts.css"

The johnmikel's answer works for me. Also it's possible to load a local font with gatsby-plugin-web-font-loader but i prefer to choose edit the gatsby-browser.js file

[dreamyguy]

I just wanted to add that @johnmikel's solution also works with .scss files. That way I didn't have to change anything in the project. The big gotcha to keep in mind here is that the path should be absolute and relative to the static/ folder.

• Font files go to static/fonts/
• The .css / .scss font loader also go to static/fonts/, importing whatever file from there
• Given that the structure is the same as mentioned above, the path to the font should be:

/fonts/name-of-font-file.woff

_not_

/static/fonts/name-of-font-file.woff