Error caused by @font-face in production env

[benoliver999]

I am getting the following error in a production env since I added a @font-face definition to css/main.css:

undefined:1
{"raw_content":"@tailwind base;\n\n@font-face{\n    font-family: Source

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Function.process (/home/ben/.gem/ruby/2.7.0/gems/jekyll-postcss-0.4.0/bin/postcss:10:21)
    at Object.<anonymous> (/home/ben/.gem/ruby/2.7.0/gems/jekyll-postcss-0.4.0/bin/postcss:45:13)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
  Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'css/main.css':
                    783: unexpected token at ''
bundler: failed to load command: jekyll (/home/ben/.gem/ruby/2.7.0/bin/jekyll)
JSON::ParserError: 783: unexpected token at ''
  /usr/lib/ruby/2.7.0/json/common.rb:156:in `parse'
  /usr/lib/ruby/2.7.0/json/common.rb:156:in `parse'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:43:in `decode'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:32:in `read'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-postcss-0.4.0/lib/jekyll/converters/postcss.rb:41:in `convert'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:102:in `block in convert'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:100:in `each'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:100:in `reduce'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:100:in `convert'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:84:in `render_document'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/renderer.rb:63:in `run'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:532:in `render_regenerated'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:524:in `block in render_pages'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:523:in `each'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:523:in `render_pages'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:208:in `render'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/site.rb:80:in `process'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/command.rb:28:in `process_site'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/commands/build.rb:65:in `build'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/commands/build.rb:36:in `process'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/command.rb:91:in `each'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
  /home/ben/.gem/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
  /home/ben/.gem/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
  /home/ben/.gem/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
  /home/ben/.gem/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
  /home/ben/.gem/ruby/2.7.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
  /home/ben/.gem/ruby/2.7.0/gems/jekyll-4.1.0/exe/jekyll:15:in `<top (required)>'
  /home/ben/.gem/ruby/2.7.0/bin/jekyll:23:in `load'
  /home/ben/.gem/ruby/2.7.0/bin/jekyll:23:in `<top (required)>'

I am using tailwind, and main.css looks like this:

---
---

@tailwind base;

@font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    src: url('/fonts/source-serif-pro/WOFF2/TTF/SourceSerifPro-ExtraLight.ttf.woff2') format('woff2'),
         url('/fonts/source-serif-pro/WOFF/OTF/SourceSerifPro-ExtraLight.otf.woff') format('woff'),
         url('/fonts/source-serif-pro/OTF/SourceSerifPro-ExtraLight.otf') format('opentype'),
         url('/fonts/source-serif-pro/TTF/SourceSerifPro-ExtraLight.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Serif Pro';
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
    src: url('/fonts/source-serif-pro/WOFF2/TTF/SourceSerifPro-ExtraLightIt.ttf.woff2') format('woff2'),
         url('/fonts/source-serif-pro/WOFF/OTF/SourceSerifPro-ExtraLightIt.otf.woff') format('woff'),
         url('/fonts/source-serif-pro/OTF/SourceSerifPro-ExtraLightIt.otf') format('opentype'),
         url('/fonts/source-serif-pro/TTF/SourceSerifPro-ExtraLightIt.ttf') format('truetype');

/* etc */

@tailwind components;

hr {
  @apply border border-gray-700;
}

.content {
  @apply w-auto mx-2 mb-4;
}

/* etc */

@tailwind utilities;

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

If I remove @font-face, everything works fine.

In a development ENV, everything is fine also.

I am also using jekyll-purgecss, I should add.

Are you seeing any errors like this?

[mhanberg]

I'm not sure if they are related, but it looks like your second @font-face doesn't have a closing }.

I can look into this sometime soon. If you have the time, please create a minimal bug reproduction jekyll project that I can clone and play around in.

Thanks for the bug report!

[benoliver999]

Thank you! I double checked, the closing } was a copy paste error, it is not on the main site.

I there's a test repo here: https://github.com/benoliver999/bfo-alt

It's a clone of my exact project minus most of the posts and images to save on size

[mhanberg]

Can you provide setup instructions? I'm running into a problem installing the brotli gem.

[mhanberg]

nvm, problem on my end, i have it running and reproduced the issue.

[benoliver999]

I swapped all the single quotes in font-family and src to double quotes, and it seems to work!

[clayton]

I had a similar problem, using Google Fonts.

---
---
/* Front matter is necessary for Jekyll */

@import "tailwindcss/base";
@import "tailwindcss/components";

/* Write your styles below this line. */

@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600;700&display=swap");
/* @import "heroicons"; */
/* Write your styles above this line. */

@tailwind utilities;

Results in:

SyntaxError: Unexpected end of JSON input

Changing (single quotes:)

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600;700&display=swap');

to (double quotes:)

@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600;700&display=swap");

Resolves the issue.