Search code examples
frontendtypographygatsby

Certain fonts not working in Typography.js and Gatsby

It seems like some fonts work when I configure typography.js and others don't.

I can't figure out why, as both fonts below are listed on the Typography.js main page: https://kyleamathews.github.io/typography.js/

Code Used:

typography.js:

import Typography from "typography"

const typography = new Typography({
    baseFontSize: "24px",
    headerFontFamily: ["Lucida Grande"],
    bodyFontFamily: ["Oxygen Mono"],
});

export default typography

gatsby-config.js:

module.exports = {
  siteMetadata: {
     title: 'Chris Maltais',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
  ],
};

Starter template: gatsby-starter-default

Library versions:

typography: 0.16.17

gatsby-plugin-typography: 1.7.19

I've also commented out the import to ./index.css in src/layouts/index.js.

Result: The Lucida Grande font will work, however the Oxygen Mono will not. In fact, any font with "Mono" in the name does not.

Am I missing something? Do typography themes contain different fonts? Any help is appreciated.

Solution

  • You also need to specify the googleFonts array as shown in the "API" section of the doc. Oxygen Mono is a Google Font, so you'll need to add this there. Lucida Grande is probably already installed on your computer but you should ship it with your website of course.