CSS Font Face src file name parsed as property and invalid css

[HeyITGuyFixIt]

• I Am on Linux
  • Debian

Description

I have a font-family with multiple sources. For some reason this results in a liquid exception being thrown despite it being valid CSS. It seems to be treating the font file name as a CSS property, and thus expects a value instead of the file extension.

Steps

This is the code that I am using:

@font-face {
    font-family: "Moon Flower";
    font-style: normal;
    font-weight: 400;
    src: asset_url("'Moon Flower/Moon_Flower.eot'");
    /*src: asset_url("'Moon Flower/Moon_Flower.eot?#iefix'") format("embedded-opentype"), */
    src: asset_url("'Moon Flower/Moon_Flower.ttf'") format("truetype"), asset_url("'Moon Flower/Moon_Flower.woff'") format("woff"), asset_url("'Moon Flower/Moon_Flower.svg'") format("svg");
    unicode-range: U+?????;
}

Output

Whenever I build it using the latest of everything I get this Liquid Exception. I temporarily commented out one line with a ? in the src url due to the issue I opened earlier.

Liquid Exception: Error: Invalid CSS after "...7938c1310d08558": expected expression (e.g. 1px, bold), was ".eot);" on line 5 of _assets/css/fonts.scss >> 68b855e8b7b24c91dd8aadb5e1c7938c1310d08558.eot); ------------------------------------------^ in /_layouts/default.html
bundler: failed to load command: jekyll (/usr/local/bundle/bin/jekyll)
SassC::SyntaxError: Error: Invalid CSS after "...7938c1310d08558": expected expression (e.g. 1px, bold), was ".eot);"
        on line 5 of _assets/css/fonts.scss
>> 68b855e8b7b24c91dd8aadb5e1c7938c1310d08558.eot);

   ------------------------------------------^

Expected

I expect it to replace asset_url with url with the file name without any errors.

[envygeeks]

Do you have a full trace and potentially a demo site that can replicate this issue?

[HeyITGuyFixIt]

This was from a while ago; let me see if I can throw something together.

[HeyITGuyFixIt]

I am having a hard time getting to a point where I can even attempt to reproduce this. I quickly threw together a site on GitLab using their template, uploaded the fonts I used above and added the font-face property to the base.scss file. And for some reason asset_url is not working like it says it would in the README file. It does not appear to be even parsed.

This is the resulting CSS file, with the font-face at the top. You will see that asset_url is used (probably incorrectly) and has not been parsed at all like I think I should expect.

Here are the latest artifacts from the GitLab Pages build. You can see there that the font is being included on the site under "fonts/Moon Flower/".

And this is the repository I just created for demonstrating the original issue. This goes live to https://christiansirolli.gitlab.io/jekyll-bugs so I changed the baseurl to /jekyll-bugs. Other than that, the _config.yml file hasn't been modified from GitLab's template.

Not sure what I am doing wrong here. Once I can get the asset_url stuff to actually be parsed, I should be able to reproduce the original issue.

[envygeeks]

I looked at your Gemfile, there is not Jekyll Assets in there at all...

[HeyITGuyFixIt]

It's been a while since I've done this. So that's probably why.

[glenpike]

I had to workaround an issue where we are getting font-face to work in our site. So thought I'd post here for future ref.

Here is how I solved it, by adding this to the header of our site:

  :css
    @font-face {
      font-family: 'notesesa';
      src: url({% asset 'mywebfont.eot' @path %});
      src: url("{% asset 'mywebfont.eot' @path %}?#iefix") format('embedded-opentype'),
          url("{% asset 'mywebfont.woff' @path %}") format('woff'),
          url("{% asset 'mywebfont.ttf' @path %}") format('truetype'),
          url("{% asset 'mywebfont.svg' @path %}#mywebfont") format('svg');
      font-weight: 700;
      font-style: bold;
    }

(It's a bit dirty - we are having to use Dart Sass for our SCSS compiling, but we can still use Jekyll Assets to handle our webfonts for assets.)

[envygeeks]

Is it stripping the # and ~?

[glenpike]

Is it stripping the # and ~?

For us, we could not get it to use asset_url or asset_path as these only seemed to be handled in SCSS / SASS files (which I believe don't get parsed by the plugin because we're using Dart and outputting CSS from that), so I have no comparison - it was just I'd been prompted by yesterday's solution for adding asset paths to try this for us.