Potential security vulnerability in Axios (Notification from Github)
Kindly Upgrade the Axios to Latest Patched Version

Getting these errors after installing and running gatsby develop.

error Plugin gatsby-plugin-prefetch-google-fonts returned an error


  TypeError: googleFontsPlugin.make is not a function

and

Error: ENOENT: no such file or directory, open './.cache/google-fonts/google-fonts.css'

  - render-page.js:10672 Object../node_modules/gatsby-plugin-prefetch-google-fonts/gatsby-ssr.js.exports.onRenderBody

My config file:

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Oxygen Mono`
          },
          {
            family: `Open Sans`,
            variants: [`400`, `700`]
          }
        ]
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
  ]
}

Using this plugin in my app leads to a syntax error in public/render-page.js saying Unexpected token "." on a line that looks like: {}.DEBUG = namespaces. After much debugging, I discovered that the issue is because the of the debug library getting included via a number of transitive dependencies stemming from the use of globby.

It seems that in my project, the debug library is getting pulled into render-page.js then we fall victim to debug-js/debug#301 (more details in gatsbyjs/gatsby#12901 & webpack/webpack#8641). I tried ignoring debug/src/node.js with the webpack ignore plugin, but then I got a module error because it was missing and getting required. I realize this isn't an issue with this package itself, but I'm posting here to ask: has anyone else run into a similar problem? Were you able to successfully work around it?

I am getting an error saying there is no such file => error ENOENT: no such file or directory, stat './public/google-fonts/**/*.woff2'.

But if can see the file that that at least one of such file exists in the google-fonts subfolder.

Description

The plugin put path prefix in producción:

pathprefixgoogle-fonts/s/playfairdisplay/v14/nuFlD-vYSZviVYUb_rj3ij__anPXBYf9lW4e5g.woff2

Version

"gatsby": "^2.2.3",
"gatsby-plugin-prefetch-google-fonts": "^1.4.0"

The upstream Axios (HTTP client) has a high-severity vulnerability (see axios/axios#2183). gatsby-plugin-prefetch-google-fonts users should be encouraged to monitor this issue, and upgrade once resolved.

I noticed recently that Playfair Display does not load with this plugin.

Any ideas what's up?

My Netlify build is failing with this:

error Building static HTML for pages failed
See our docs page on debugging HTML builds for help https://gatsby.app/debug-html
           |     headComponents.push(
           |       <link
       >  |         as="fetch"
           |            ^
           |         rel="preload"
           |         key={dataPath}
           |         href={dataPath}

WebpackError: ENOENT: no such file or directory, stat './public/google-fonts/*  */*.woff2'

My gatsby-config.js looks like this:

  plugins: [
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Rubik`,
            variants: [`300`]
          },
          {
            family: `Roboto`,
            variants: [`700`, `900`]
          },
          {
            family: `Roboto Slab`,
            variants: [`300`]
          },
          {
            family: `Roboto Condensed`,
            variants: [`700`]
          },
        ],
      },
    }
]

Using version 1.4.1

When running gatsby develop on Windows (yeah yeah), Google fonts don't work when you're invoking any URL other than the root (i.e. navigating to localhost:8000/ works, navigating to localhost:8000/some-page doesn't work, though if you go to the root and a link there takes you to some-page it works presumably due to React/SPA-ish magic).

It turns out the CSS injected by the plugin incorrectly starts the style url with a backslash:

    <style type="text/css">
            @font-face {
            font-family: 'Noto Serif';
            font-style: normal;
            font-weight: 400;
            src: local('Noto Serif'), local('NotoSerif'), url(\google-fonts/s/notoserif/v7/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2) format('woff2'), url(\google-fonts/s/notoserif/v7/ga6Iaw1J5X9T9RW6j9bNfFcWbg.woff) format('woff');
            font-display: swap
        }
    ...
    </style>

Observe url(\google-... above.

This seems like a problem introduced by the use of path.join at the bottom of download-fonts.js when we substitute in the local URIs with path dutifully injecting OS-specific path separators.

Changing the backslashes to forward slashes (e.g. by manually editing .cache\google-fonts\google-fonts.css (as it were, backslashes and all)) resolves the issue, as a proof of concept.

In my gatsby-config.js I'm adding a pathPrefix for my assets, however the requests for the prefetched fonts don't seem to take that into account, which results in a 404 error code for the defined google fonts when I build my project to production. Any ideas on how to fix this?

module.exports = {
  pathPrefix: '/some-folder',
  plugins: [
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `PT Sans`,
            variants: [`400`, `700`]
          },
        ],
      },
    }
  ],
}

The plugin is having issues with the last release of google-fonts-plugin.

It was giving me this error:

  TypeError: googleFontsPlugin.make is not a function

  - download-css.js:34 _callee$
    [saxenhammer]/[gatsby-plugin-prefetch-google-fonts]/download-css.js:34:38

  - debuggability.js:313 Promise._execute
    [saxenhammer]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [saxenhammer]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [saxenhammer]/[bluebird]/js/release/promise.js:79:10

  - download-css.js:45
    [saxenhammer]/[gatsby-plugin-prefetch-google-fonts]/download-css.js:45:18

  - gatsby-node.js:68 Object._callee$
    [saxenhammer]/[gatsby-plugin-prefetch-google-fonts]/gatsby-node.js:68:20

As temporal solution, I installed the v2.0.2 of google-fonts-plugin, which fixed the error.

Is there a way to modify default font-display:swap to something else? Great plugin by the way.

Thank you for this nice plugin!

One question: Why do you change the default settings) for minify and encode?

Something appears to be going wrong in merge-css.js; when I dig into the cache, the woff.css and woff2.css files look fine, but the google-fonts.css is completely missing the src: section for the Material Icons font family.

For this test I'm just using Roboto and Material Icons so you can see the contrast. Order of the fonts in the options list does not affect the result.

Here's woff.css:

  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
}

And woff2.css:

  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
}

But here's what comes through to google-fonts.css:
@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(/google-fonts/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),url(/google-fonts/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');font-display: swap;}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display: swap;}

No matter what combination of variants / subsets I can never get Oswald to pre-fetch, there are no errors logged in the process it just silently doesnt fetch the font.

If I change the name to 'oswald' rather than 'Oswald' I see errors in terminal whilst running gatsby develop where the response from Google has returned a 400.

from gatsby-config.js

{
  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
      {
        family: `Roboto`,
        variants: [`300`, `400`, `500`, `600`, `700`],
        subsets: [`latin`],
      },
      {
        family: `Oswald`,
        variants: [`200`, `700`],
        subsets: [`latin`],
      },
    ],
  },
}

This is just a feature request, but it'd be really nice if this plugin allowed for setting the font-display property for each webfont.

There's an article about this property here. It can really improve a page's user experience, especially for users on slower connections. It's also something that Google PageSpeed Insights looks for.

I don't think it does.