Problem with @font-face using jekyll


Hi, I’m new to Jekyll so forgive me if this is a remedial question.

I modified a version of minima and purchased a webfont (eot, woff, woff2 filetypes)

I have the files stored under assets/fonts/
On my top level scss file i have the following code:

@font-face {
font-family: “Post Grotesk”;
src: url(asset_path(“fonts/PostGrotesk-Book.eot”)) format(‘embedded-opentype’), /* IE9 Compat Modes /
url(asset_path(“fonts/PostGrotesk-Book.woff”)) format(‘woff’), /
Modern Browsers /
url(asset_path(“fonts/PostGrotesk-Book.woff2”)) format(‘woff2’); /
Safari, Android, iOS */

and then I changed the $base-font-family variable to “Post Grotesk”

from there I went to my config file and added this

  • _assets
  • _assets/fonts

However, despite this, I cannot get the font files to work.

I am using github pages.

Thanks in advance.


You seem to be using jekyll-assets plugin.
Its is not supported on GitHub Pages

One solution is to manually build locally with

$ bundle exec jekyll build

and upload the *contents of _site to GitHub Pages.

Alternatively, assume that you’re not using the jekyll-assets plugin and thus you’ll have to add proper file paths in the url in the sass file and try again. Also, directories starting with _ have a special meaning in Jekyll. So _assets wont be processed till you add that folder to include: array in your config file.

(If the include: config doesn’t work, rename the directory to assets)