Problem with @font-face using jekyll

1

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:
sources:

  • _assets
  • _assets/fonts

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

I am using github pages.

Thanks in advance.

2

Hi,
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)

A

3

Hi,
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?

4

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.

5

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

6

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")
or
src: asset_url("fonts/Futura/FuturaReg/futura.otf") format("opentype")

Thanks!