Gatsby: How do I inject additional css into <style data-href="/app.a53c8196d7c24d89890a.css">?

[ajmalafif]

Summary

I can't seem to find a way to access <style data-href="/app.a53c8196d7c24d89890a.css">. I want to add in font-display: swap which is missing, but can't seem to find where and how that code is injected.

Relevant information

repo: https://github.com/ajmalafif/gatsby-custom-webfont
site: https://gatsby-custom-webfont.netlify.com

Environment (if relevant)

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.9.4/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19 
    gatsby-plugin-google-tagmanager: ^2.0.5 => 2.0.5 
    gatsby-plugin-manifest: ^2.0.4 => 2.0.4 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sass: ^2.0.1 => 2.0.1 
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1 
    gatsby-plugin-subfont: ^1.0.3 => 1.0.3 
  npmGlobalPackages:
    gatsby-cli: 2.4.2

File contents (if changed)

gatsby-config.js: https://github.com/ajmalafif/gatsby-custom-webfont/blob/master/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Gatsby custom webfont',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-sass',
    'gatsby-plugin-subfont',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-v2-interUI',
        short_name: 'gaterUI',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
  ],
}

gatsby-browser.js: https://github.com/ajmalafif/gatsby-custom-webfont/blob/master/gatsby-browser.js

require("inter-ui")

[jgierer12]

Hi, that's the CSS from the inter-ui package which gets added when you require("inter-ui"). If you want to modify that, you can copy the contents of inter-ui's CSS file into your own file, e.g. src/inter-ui.css, make your desired changes and require that instead of the package:

- require("inter-ui")
+ require("./src/inter-ui.css")

[ajmalafif]

Thank you so much @jgierer12!

This works like a charm!