gatsby: Webfontloader plugin self-hosted fonts not loading

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…

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

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"

+15

johnmikel on Mar 13, 2019

Hey @fauslg

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

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

urls: ['fonts.css']

sidharthachatterjee on Jan 17, 2019

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

wesbos on Jan 9, 2020

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!

fauslg on Jan 22, 2019