Using @font-face webfonts in a Jekyll build

Question

I'm attempting to use webfonts a Jekyll build. The fonts are displaying correctly locally, but when pushed to a live environment the fonts don't display. There is a console error of Failed to load resource: the server responded with a status of 404 () for each font missing.

The _site directory is setup like this:

assets/css/style.css
fonts/ <-- all my .woff files are in here
index.html

The CSS file is referenced in the index.html file like this:

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

The @font-face declaration is like this:

@font-face {
  font-family: 'My font';
  src:  url('../../fonts/myfont.woff2') format('woff2'),
        url('../../fonts/myfont.woff') format('woff');
}

Do I need to declare something in the _config.yml file for this to work correctly?

Answer 1

This is now working. You need to put the font files in the root directory for this to work. These files then go into the root of the _site directory upon build.

For example:

Before:

my-jekyll-theme/assets/css/style.css
my-jekyll-theme/myfont.woff
my-jekyll-theme/myfont.woff2
my-jekyll-theme/index.html

After build:

_site/assets/css/style.css
_site/myfont.woff
_site/myfont.woff2
_site/index.html

@font-face declaration that references to font files at the root directory:

@font-face {
  font-family: 'My font';
  src:  url('../../myfont.woff2') format('woff2'),
        url('../../myfont.woff') format('woff');
}

With the same CSS reference inside index.html

<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">

There probably is a more Jekyll way of doing this, but i'm yet to find one.