Add font-face support

[KyleAMathews]

Add an array of objects each specifying the font-face rule e.g.

{
  fontFamily: "DinNextRounded",
  src: [
    "url(../fonts/dinnnextrounded_bold.eot)",
    "url(..'fonts/dinnextrounded_bold.woff)"
  ],
  fontWeight: 700
}

[arthurvi]

@KyleAMathews Hi, does this still work / am I using it correctly?

const typography = new Typography({
  googleFonts: [
    {
      name: 'Bitter',
      styles: ['400', '400i', '700']
    }
  ],
  fontFaces: [
    {
      fontFamily: 'Fun Font',
      fontWeight: 400,
      src: ['url(../fonts/fun-font.woff)']
    }
  ],
  includeNormalize: true,
  headerFontFamily: ['Bitter'],
  bodyFontFamily: ['Fun Font']
});

The above sadly does not work. Thanks!

[KyleAMathews]

Nope, removed it as decided it was a bad fit for the library.

[arthurvi]

Ah bummer, Thanks though! Any advice where I can look to use a local font (not open) in Gatsby?

[jayalfredprufrock]

I'm surprised that was removed but google font support wasn't. It looks like you need to have a global stylesheet containing the font-face definitions just to facilitate using a custom local font which is a shame considering Typography.js + styled-components seems to eliminate the need for a global stylesheet otherwise. Hope you consider bringing it back at some point, or perhaps moving it and google font support into a plugin or something.

[sergeylukin]

What's the current status of using custom font-face? Is google web fonts the only support built-in option?