search

Munter / subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
MIT License
1.56k stars 29 forks source link

Fails on Font Awesome\ 5 Free #128

Closed rustyconover closed 3 years ago

rustyconover commented 3 years ago

When using Font Awesome 5, subfont throws an exception when use as a part of gatsby-plugin-subfont.

Subfont is attempting to parse the font family Font Awesome\ 5 Free but font-family-papandreou does not successfully do that so it throws a parse error exception. Causing the gatsby build to fail.

Error: Parse error

  - index.js:132 Object.parse
    [gatsby-site]/[font-family-papandreou]/index.js:132:15

  - subsetFonts.js:111 
    [gatsby-site]/[subfont]/lib/subsetFonts.js:111:8

  - lodash.js:639 arrayMap
    [gatsby-site]/[lodash]/lodash.js:639:23

  - lodash.js:9580 map
    [gatsby-site]/[lodash]/lodash.js:9580:14

  - lodash.js:9307 Function.flatMapDeep
    [gatsby-site]/[lodash]/lodash.js:9307:26

  - subsetFonts.js:102 groupTextsByFontFamilyProps
    [gatsby-site]/[subfont]/lib/subsetFonts.js:102:26

  - subsetFonts.js:699 subsetFonts
    [gatsby-site]/[subfont]/lib/subsetFonts.js:699:23

  - subfont.js:150 subfont
    [gatsby-site]/[subfont]/lib/subfont.js:150:24

  - gatsby-node.js:17 Object.exports.onPostBuild
    [gatsby-site]/[gatsby-plugin-subfont]/gatsby-node.js:17:3

  - api-runner-node.js:330 runAPI
    [gatsby-site]/[gatsby]/src/utils/api-runner-node.js:330:16
papandreou commented 3 years ago

@rustyconover, thanks for getting in touch! Can you share your @font-face declarations and the CSS rules that reference the given font? Is it literally font-family: Font Awesome\ 5 Free?

rustyconover commented 3 years ago

@papandreou Hi there, thanks for the reply!

I'm just using the scss files from FontAwesome at

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

The font-family declaration is:

font-family: 'Font Awesome 5 Free';

I'm not sure what piece of code is adding the backslash escaping.

papandreou commented 3 years ago

Seems like this escaped space syntax is output by cssnano because Font Awesome\ 5 Free saves a single character compared the quoted string syntax of 'Font Awesome 5 Free' (the <custom-ident> syntax disallows identifiers starting with a number).

I updated font-family-papandreou to allow this syntax: https://github.com/papandreou/font-family/commit/8b4826c45fca2b70cd84b5f6fa9bfa9827df1cae

Should be fixed in subfont 5.2.2 :hugs:

rustyconover commented 3 years ago

Hi @papandreou

Thanks for the patch, but bumping up the dependencies for gatsby-plugin-subfont to 5.2.2 leads to one problem. The Font Awesome font is no longer included in the bundle because the font-family is no longer detected as being used by the page.

It is quite strange for this to happen, I can't figure out why the face is no longer recognized.

papandreou commented 3 years ago

Hmm, I think I'll need some more info to be able to debug that. Can you provide some kind of setup where it fails? Ideally a minimal setup without the plugin, but it's also fine if you can share the dev setup of the website where it happens?

papandreou commented 3 years ago

Should finally be fixed in 5.2.4.