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)


I have a similar problem and cannot find where the issue is (yes, a beginner here).
I cannot load two new fonts for my 404 page, even though I have followed same logic structure for the code and I can see the other fonts rendered.

In my case:

  • Created specific _404.scss and defined properties there;
  • New fonts are placed in assets/fonts/NameOfFont/NameOfFont-Bold (example) and I can see them included within the site folder;
  • Same goes for the specific CSS properties defined, all of them work but the font-family. It is not applied;
  • I also have a file _sass/_fonts.scss file containing all @font-face properties for them;
  • I do have jekyll-assets installed.

Not sure to understand the steps included in the solution offered, when suggesting to manually build locally and upload contents (from which point the url path starts? fonts?

What’s the path to your CSS file in _site/ that sets the font src? My guess is you have to tweak those paths slightly in the CSS. A dead giveaway of this is if you open your site in a browser, open the web developer tools and look at the console.

There will be errors for all the font files it can’t locate.

I agree, I probably will have to try again that option. Path is “/assets/main.css”. No errors displayed in console

Any suggestions on how to tweak them? I’m really interested in figuring this out.

Tested Google fonts with @import and it works. Still have the problem with local fonts and I can’t find where the issue is.
What should be the standard way of using @font-face when using a font family (multiple weights, for instance)?:

src: asset_url("Futura/FuturaReg/futura.otf") format("opentype")
src: asset_url("fonts/Futura/FuturaReg/futura.otf") format("opentype")