{"componentChunkName":"component---node-modules-gatsby-theme-blog-core-src-templates-post-query-js","path":"/blog/typography/","result":{"data":{"site":{"siteMetadata":{"title":"Geekynut","social":[{"name":"twitter","url":"https://twitter.com/geekynut"},{"name":"github","url":"https://github.com/geekynut"}]}},"blogPost":{"__typename":"MdxBlogPost","id":"ba3e513b-af97-5b72-94d6-589cea1df8a3","excerpt":"How to import custom fonts in Gatsby You can find information on how to set up gatsby  typography  on  gatsbyjs.org . This forum is built by…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Gatsby Typography\",\n  \"path\": \"/blog/typography\",\n  \"tags\": [\"gatsby\", \"react js\", \"gatsby plugin\"],\n  \"date\": \"2020-06-22T00:00:00.000Z\",\n  \"topic\": \"Gatsby\",\n  \"level\": \"intermediate\",\n  \"description\": \"A guide that shows off the different ways we can import fonts in our gatsby installation.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"how-to-import-custom-fonts-in-gatsby\"\n  }, \"How to import custom fonts in Gatsby\"), mdx(\"p\", null, \"You can find information on how to set up gatsby \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/docs/typography-js/\"\n  }), \"typography\"), \" on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"gatsbyjs.org\"\n  }), \"gatsbyjs.org\"), \".\"), mdx(\"p\", null, \"This forum is built by Gatsby and I used two main fonts families. The first is the \\u201CCourier New\\u201D font family and the second is the \\u201CMontserrat\\u201D one.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"The main reason I wrote this guide is because \\u201CCourier New\\u201D is not open source and is not part of the google fonts.\\nIn order to use it we have to upload it directly from our blog assets folder.\"), mdx(\"p\", null, \"I found the following method on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://stackoverflow.com/\"\n  }), \"stack overflow\"), \":\"), mdx(\"p\", null, \"We need to add the folder containing our font/s in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-config.js\"), \" \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"plugin: [{\\n    resolve: \\\\gatsby-source-filesystem`,\\n    options: {path: `${__dirname}/assets/font`,},\\n    },]`\\n\")), mdx(\"hr\", null), mdx(\"p\", null, \"then I added the font family to my css \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fonts.css\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), \"u/font-face {\\nfont-family: 'Courrier New';\\nfont-style: normal;\\nfont-weight: lighter;\\nsrc: url(\\\"../font/CourrierNew.ttf\\\") format(\\\"truetype\\\");\\n}\\n//use format(\\\"woff\\\") for woff format\\n\")), mdx(\"hr\", null), mdx(\"p\", null, \"this approach was easy and worked fine for the \\u201CCourier New\\u201D family as the file size is 27kb.\"), mdx(\"p\", null, \"The \\u201CMontserrant\\u201D family font file size is over 240kb. Despite nowaday most people have fast internet connections we should alway try to minimize the size of our files.\"), mdx(\"p\", null, \"Luckily there is a NPM package called \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/KyleAMathews/typefaces\"\n  }), \"typeface\"), \" we can use to import most of the open source font family in our project.\"), mdx(\"p\", null, \"The package is easy to install.\\nFrom your terminal use the following command:\"), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm\"), \": \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install --save typeface-open-sans\")), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn\"), \": \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn add typeface-open-sans\")), mdx(\"hr\", null), mdx(\"p\", null, \"you need to replace \\u201Copen-sans\\u201D with the name of the family you need to install, you can find the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/KyleAMathews/typefaces/tree/master/packages\"\n  }), \"list\"), \" of the supported font family and more on the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/KyleAMathews/typefaces/tree/master/packages\"\n  }), \"git page project\"), \". \"), mdx(\"p\", null, \"Once you install our family font we can import it directly in our pages \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"import 'typeface-open-sans' \"), \" or in the app entry file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \" require(\\\"typeface-open-sans\\\")\")), mdx(\"h2\", {\n    \"id\": \"difference-in-size\"\n  }, \"Difference in size\"), mdx(\"p\", null, \"We should always use \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/KyleAMathews/typefaces/tree/master/packages\"\n  }), \"typeface\"), \" when we can. I tested both methods above with the \\u2018Montserrant\\u2019 family font as it is an open source and we can download from \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://fonts.google.com/\"\n  }), \"google font\"), \".\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Lighthouse performance\"), \" benchmark using the former solution stopped at \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"71%\"), \", using \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"typeface with no other code chages\"), \" brought the performance to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"90%\"), \".  \"));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/blog/typography/","title":"Gatsby Typography","tags":["gatsby","react js","gatsby plugin"],"keywords":[],"date":"June 22, 2020"},"previous":{"__typename":"MdxBlogPost","id":"0be18779-bf5d-53ef-82d1-d3d2424c6ca0","excerpt":"Javascript Reduce array methods Map, filter and reduce are among the first methods that wow you when learning arrays methods. Reduce has a…","slug":"/blog/reducejs/","title":"Reduce JS","date":"May 07, 2020"},"next":{"__typename":"MdxBlogPost","id":"1154b7c2-0034-53a3-a86e-45101a10de6d","excerpt":"Gatsby's hello-world starter with tailwind and sass preprocessor This starter ships with the main Gatsby configuration files, sass and…","slug":"/blog/gatsby-tailwind/","title":"Tailwind and gatsby","date":"September 02, 2020"}},"pageContext":{"id":"ba3e513b-af97-5b72-94d6-589cea1df8a3","previousId":"0be18779-bf5d-53ef-82d1-d3d2424c6ca0","nextId":"1154b7c2-0034-53a3-a86e-45101a10de6d"}}}